/* FactChain owner: tokens */
/* ================================================================
   FactPay Design System v3.0
   Based on bestblendercourse.com aesthetic, adapted for red accent
   ================================================================ */

/* ----------------------------------------------------------------
   0. FONT IMPORT
   ---------------------------------------------------------------- */
@font-face {
    font-family: 'Gilroy';
    src: url('/static/fonts/Gilroy-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/static/fonts/Gilroy-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/static/fonts/Gilroy-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/static/fonts/Gilroy-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/static/fonts/Gilroy-Extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {
    /* Backgrounds */
    --bg-primary: #121212;
    --bg-alt: #121212;
    --bg-card: #1A1A1A;
    --bg-block: #1F1F1F;
    --bg-input: #2A2A2A;

    /* Accent */
    --accent: #E53935;
    --accent-hover: #C62828;
    --accent-glow: rgba(229, 57, 53, 0.3);
    --accent-glow-strong: rgba(229, 57, 53, 0.5);

    /* Text */
    --text-primary: #F5F5F5;
    --text-secondary: #A0A0A0;
    --text-muted: #666666;
    --text-dim: #444444;

    /* Borders */
    --border-color: #2A2A2A;
    --border-light: #333333;

    /* Status */
    --success: #4CAF50;
    --error: #F44336;
    --warning: #FF9800;
    --info: #2196F3;

    /* Radii */
    --radius-card: 40px;
    --radius-block: 48px;
    --radius-input: 24px;
    --radius-btn-pay: 32px;
    --radius-tag: 20px;
    --radius-faq: 24px;
    --radius-modal: 24px;
    --radius-auth: 32px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;

    /* Button system — .btn--lg matches form-input height (80px / 24px radius) */
    --btn-height-sm: 36px;
    --btn-height-md: 48px;
    --btn-height-lg: 80px;
    --btn-padding-sm: 0 16px;
    --btn-padding-md: 0 24px;
    --btn-padding-lg: 0 32px;
    --btn-font-sm: 13px;
    --btn-font-md: 15px;
    --btn-font-lg: 16px;
    --btn-radius-sm: 12px;
    --btn-radius-md: 12px;
    --btn-radius-lg: 24px;
    --btn-font-weight: 600;
    --btn-gap: 8px;

    /* Spacing */
    --container-max: 1200px;
    --container-padding: 24px;
    --section-gap: 120px;
    --navbar-height: 64px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-accordion: 0.35s ease;

    /* Shadows */
    --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-floating: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.5);
}