/* =========================================================================
   CYRKIL EUROPE — Design tokens
   Source: Website Design & Technical Specification v1.0, Section 20.2–20.3, 25
   Status: PROPOSED — REQUIRES DESIGN SIGN-OFF (see Section 20.2 of the spec).
   These are the starting-proposal values fixed by the spec's brand direction
   (Midnight Navy / Cyber Blue / French Gold, light+dark modes, WCAG 2.2 AA),
   not a ratified CYRKIL brand standard.
   ========================================================================= */

:root {
  /* ---- Color: brand ---- */
  --color-brand-navy:        #0B1B33; /* primary / backgrounds */
  --color-brand-navy-2:      #132A4C; /* secondary dark panels nested on navy */
  --color-brand-blue:        #1E6FEB; /* primary interactive accent — buttons/links/focus on light */
  --color-brand-blue-light:  #5B9BFF; /* accent on dark backgrounds; hover for blue elements */
  --color-brand-gold:        #C9A227; /* secondary accent — primary CTA on dark hero, LISA mark */
  --color-brand-gold-light:  #E4C766; /* gold text / eyebrow labels on dark backgrounds */

  /* ---- Color: surface & text ---- */
  --color-bg-page:      #F4F6FB; /* "Cloud" */
  --color-bg-surface:   #FFFFFF;
  --color-text-primary: #0B1B33; /* "Ink" */
  --color-text-secondary: #5B6B85; /* "Slate" */
  --color-text-muted:   #93A0B8;
  --color-border-default: #DDE3EF;

  /* ---- Color: state (never used decoratively; always icon+label+color, Section 8.2/24) ---- */
  --color-state-success: #3FA772;
  --color-state-warning: #E0A73B;
  --color-state-danger:  #D64545;
  --color-state-info:    var(--color-brand-blue);

  /* ---- On-dark text (for content placed on navy bands) ---- */
  --color-text-on-dark:        #FFFFFF;
  --color-text-on-dark-muted:  #A9B7CF;

  /* ---- Spacing (4px base unit) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 4px;   /* tags, chips, small badges */
  --radius-md: 8px;   /* buttons, inputs, small cards */
  --radius-lg: 14px;  /* cards, panels, modals */
  --radius-pill: 999px; /* pill buttons, nav pills, status badges */

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(11, 27, 51, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 27, 51, 0.10);
  --shadow-lg: 0 16px 32px rgba(11, 27, 51, 0.16);
  --shadow-focus-light: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-brand-blue);
  --shadow-focus-dark:  0 0 0 2px var(--color-brand-navy), 0 0 0 4px var(--color-brand-gold);

  /* ---- Container / grid ---- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-text: 720px;

  /* ---- Typography: display & heading scale (desktop) ---- */
  --type-display-size: 40px; --type-display-lh: 1.15; --type-display-weight: 700;
  --type-h1-size: 30px;      --type-h1-lh: 1.2;        --type-h1-weight: 700;
  --type-h2-size: 22px;      --type-h2-lh: 1.25;       --type-h2-weight: 700;
  --type-h3-size: 17px;      --type-h3-lh: 1.3;        --type-h3-weight: 600;
  --type-h4-size: 14px;      --type-h4-lh: 1.35;       --type-h4-weight: 600;

  /* ---- Typography: text / UI / metadata scale ---- */
  --type-body-size: 16px;       --type-body-lh: 1.6;   --type-body-weight: 400;
  --type-body-sm-size: 14px;    --type-body-sm-lh: 1.55; --type-body-sm-weight: 400;
  --type-caption-size: 12px;    --type-caption-lh: 1.4; --type-caption-weight: 400;
  --type-label-size: 12px;      --type-label-lh: 1.3;  --type-label-weight: 600;
  --type-nav-size: 14px;        --type-nav-lh: 1.2;    --type-nav-weight: 500;
  --type-meta-size: 12px;       --type-meta-lh: 1.3;   --type-meta-weight: 500;

  --font-family-base: "Inter", "Calibri", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  /* Arabic companion typeface: PROPOSED — REQUIRES DESIGN SIGN-OFF (Section 20.3).
     System-safe, x-height-matched fallback used here pending final selection. */
  --font-family-ar: "Noto Kufi Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Tablet step-down (768–1023px) */
@media (max-width: 1023px) {
  :root {
    --type-display-size: 32px;
    --type-h1-size: 26px;
    --type-h2-size: 20px;
  }
}

/* Mobile step-down (<768px) — body never below 16px (WCAG 2.2 AA / iOS zoom-on-focus, Section 15.3/20.3) */
@media (max-width: 767px) {
  :root {
    --type-display-size: 28px;
    --type-h1-size: 23px;
    --type-h2-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}