/* =============================================================================
   FlyChina Professional Design — Design Tokens (01 Foundation)
   Source of truth: Figma file "FlyChina Professional Design"
   (file key Z4ao4Tmh1dAEjrPAzEsyZj) › 01 Foundation, read via Figma MCP
   (variable definitions + component inspection). Full foundation, imported
   whole — every value here is used by css/components.css.
   ============================================================================= */

:root {
    /* ---- Color -------------------------------------------------------------
       Figma › Color/* variables, plus semantic colors surfaced by the Input
       and Icon Button components (placeholder / error / icon-button shadow).
    */
    --color-primary: #464d69;            /* Color/Primary  (slate) */
    --color-text-primary: #464d69;       /* Color/Text Primary */
    --color-text-primary-alt: #0b2866;   /* swatch "Text Primary" #0B2866 */
    --color-primary-navy: #09245d;       /* brand navy (swatch "Primary") */
    --color-primary-border: #09245d;     /* Color/Primary Border */
    --color-primary-action: #ffc300;     /* Color/Primary Action (CTA yellow) */
    --color-text-action: #ffc300;        /* Color/Text Action */
    --color-surface: #ffffff;            /* Color/Surface */
    --color-background: #f5f5f5;          /* Color/Background */
    --color-secondary-background: #000000; /* Color/Secondary Background */
    --color-overlay-badge: rgba(0, 0, 0, 0.6); /* Secondary Background @ 60% for overlay
                                                  badges — alpha is baked into the fill so
                                                  the white icons/text on top stay opaque */
    --color-border: #d1d5db;             /* Color/Border */
    --color-text-inverse: #ffffff;       /* Color/Text Inverse (on dark overlays) */
    --color-text-placeholder: #9ca3af;   /* Color/Text Placeholder (Input) */
    --color-error: #dc2626;              /* Color/Error (Input) */
    --color-error-border: #dc2626;       /* Color/Error Border (Input) */

    /* ---- Typography (Figma type styles) ------------------------------------ */
    --font-family-base: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto,
        'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', 'Noto Sans SC', sans-serif;

    --font-display-lg: 700 40px/48px var(--font-family-base);  /* Display/Large */
    --font-display-md: 700 36px/44px var(--font-family-base);  /* Display/Medium */
    --font-display-sm: 700 32px/40px var(--font-family-base);  /* Display/Small */

    --font-heading-lg: 700 32px/40px var(--font-family-base);  /* Heading/Large */
    --font-heading-md: 700 24px/32px var(--font-family-base);  /* Heading/Medium */
    --font-heading-sm: 600 20px/28px var(--font-family-base);  /* Heading/Small */
    --font-heading-xs: 600 14px/16px var(--font-family-base);  /* Heading/xS */

    --font-body-lg: 400 18px/28px var(--font-family-base);     /* Body/Large */
    --font-body-md: 400 16px/24px var(--font-family-base);     /* Body/Regular */
    --font-body-sm: 400 14px/20px var(--font-family-base);     /* Body/Small */

    --font-label-lg: 500 16px/24px var(--font-family-base);    /* Label/Large */
    --font-label-md: 500 14px/20px var(--font-family-base);    /* Label/Medium */
    --font-label-sm: 500 12px/16px var(--font-family-base);    /* Label/Small */

    --font-caption: 400 12px/16px var(--font-family-base);     /* Caption */
    --font-navigation: 500 16px/24px var(--font-family-base);  /* Navigation */

    /* ---- Spacing (Figma › Spacing/*) --------------------------------------- */
    --space-0: 0px;
    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;   /* Figma var Spacing/16 */
    --space-20: 20px;
    --space-24: 24px;   /* Figma var Spacing/24 */
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-52: 52px;
    --space-64: 64px;

    /* ---- Radius ------------------------------------------------------------
       Foundation "Radius" scale (4px-based) from Figma › 01 Foundation.
       Full scale imported, plus the pill token. Semantic aliases below map the
       steps the components actually use:
         · fields / buttons / inputs  → 12
         · cards / search containers  → 16
         · indicators / icon buttons  → pill
    */
    --radius-0: 0px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-pill: 999px; /* Figma radius/pill */

    /* Semantic aliases (used by css/components.css + css/styles.css) */
    --radius-none: var(--radius-0);
    --radius-sm: var(--radius-4);
    --radius-md: var(--radius-12);   /* fields, buttons, inputs */
    --radius-lg: var(--radius-16);   /* cards, search containers */

    /* ---- Shadow (Figma effect variables, verbatim) ------------------------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.10);   /* Icon Button */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10);   /* Shadow/Small  #0000001A */
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);  /* Shadow/Medium #0000001F */
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15); /* Shadow/Large  #00000026 */

    /* ---- Layout / component dimensions (semantic) -------------------------
       Named tokens for the raw pixel sizes the Header component repeats.
       Breakpoint widths stay literal in @media (can't read custom props). */
    --header-height: 72px;              /* Figma Header bar */
    --content-max-width: 1280px;        /* header inner container */
    --logo-height: 40px;                /* Desktop */
    --logo-height-tablet: 37.5px;       /* Tablet */
    --logo-height-mobile: 26px;         /* Mobile */
}