/*
 * tokens.css — Rasid brand identity v1 (ADR-029).
 *
 * Design tokens are CSS custom properties only. No JS, no preprocessor.
 * Every public-page CSS rule MUST consume tokens, not hardcoded values.
 *
 * Owner-locked decisions reflected here:
 *  - Western 0123 numerals (font-feature-settings: 'tnum') — enforced globally.
 *  - Brand primary #0B2545 — sole brand colour beyond neutrals + semantic states.
 *  - Self-hosted fonts (ADR-002 forbids Google Fonts CDN).
 */

/* ---------- Font faces (self-hosted, font-display: swap) ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter Regular'), local('Inter-Regular'),
       url('/fonts/Inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Inter SemiBold'), local('Inter-SemiBold'),
       url('/fonts/Inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Inter Bold'), local('Inter-Bold'),
       url('/fonts/Inter-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('IBM Plex Sans Arabic'), local('IBMPlexSansArabic'),
       url('/fonts/IBMPlexSansArabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('IBM Plex Sans Arabic SemiBold'),
       url('/fonts/IBMPlexSansArabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('IBM Plex Sans Arabic Bold'),
       url('/fonts/IBMPlexSansArabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- Design tokens ---------- */

:root {
  /* Brand */
  --color-brand-primary:        #0B2545;  /* anchor */
  --color-brand-primary-hover:  #143560;
  --color-brand-primary-active: #082040;

  /* Accent (used sparingly — CTAs, focus, links) */
  --color-accent:               #1E88E5;
  --color-accent-hover:         #1976D2;

  /* Neutrals — light scheme */
  --color-neutral-50:   #FAFAFB;
  --color-neutral-100:  #F2F4F7;
  --color-neutral-200:  #E4E7EC;
  --color-neutral-300:  #D0D5DD;
  --color-neutral-400:  #98A2B3;
  --color-neutral-500:  #667085;
  --color-neutral-600:  #475467;
  --color-neutral-700:  #344054;
  --color-neutral-800:  #1D2939;
  --color-neutral-900:  #0F172A;

  /* Surfaces */
  --color-surface-page:    var(--color-neutral-50);
  --color-surface-card:    #FFFFFF;
  --color-surface-elev-1:  #FFFFFF;

  /* Text */
  --color-text-primary:    var(--color-neutral-900);
  --color-text-secondary:  var(--color-neutral-600);
  --color-text-muted:      var(--color-neutral-500);
  --color-text-on-brand:   #FFFFFF;
  --color-text-inverse:    var(--color-neutral-50);

  /* Borders */
  --color-border-subtle:  var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);

  /* Semantic states */
  --color-success:  #047857;
  --color-warning:  #B45309;
  --color-danger:   #B91C1C;
  --color-info:     var(--color-accent);

  /* Typography */
  --font-family-base:    'Inter', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif;
  --font-family-arabic:  'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Geeza Pro', system-ui, sans-serif;
  --font-family-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (modular, base 16px) */
  --font-size-xs:    0.75rem;     /* 12 */
  --font-size-sm:    0.875rem;    /* 14 */
  --font-size-base:  1rem;        /* 16 */
  --font-size-lg:    1.125rem;    /* 18 */
  --font-size-xl:    1.25rem;     /* 20 */
  --font-size-h6:    1.125rem;
  --font-size-h5:    1.25rem;
  --font-size-h4:    1.5rem;      /* 24 */
  --font-size-h3:    1.875rem;    /* 30 */
  --font-size-h2:    2.25rem;     /* 36 */
  --font-size-h1:    3rem;        /* 48 */
  --font-size-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);

  --line-height-tight:    1.15;
  --line-height-snug:     1.3;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.65;

  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Spacing scale (4px base) */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Radii */
  --radius-sm:    0.25rem;
  --radius-md:    0.5rem;
  --radius-lg:    0.75rem;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --shadow-md:  0 4px 8px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:  0 10px 24px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.06);

  /* Layout */
  --layout-max-content:  72rem;   /* 1152 — public-page container cap */
  --layout-gutter:       1.5rem;

  /* Global: Western 0123 numerals (owner-locked) — applied in body rule below.
     `tnum` = tabular numerals; even in Arabic text runs, digits stay 0-9 not ٠-٩. */
  --font-feature-settings-numerals: 'tnum' 1, 'lnum' 1;
}

/* Light-scheme default — dark scheme via prefers-color-scheme is out of scope
   for v1 (deferred to a later token revision). */

/* Western 0123 numerals — enforced at <html> + <body> so any AR text run
   that interpolates a number renders it in Latin glyphs.  Tested in W2 scaffold
   Playwright suite. */
html, body {
  font-feature-settings: var(--font-feature-settings-numerals);
}

/* Body type defaults — Latin runs use Inter, Arabic runs use IBM Plex Sans Arabic.
   `lang="ar"` blocks pick up the Arabic family via the second cascade rule. */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
}

[lang='ar'] {
  font-family: var(--font-family-arabic);

  /* AR-specific token overrides per docs/design/arabic-ui-design-system.md.
     Scope: ONLY inside lang='ar' subtrees. EN side uses base tokens above
     and is unaffected (verified by Playwright EN visual snapshots).

     Empirical rationale: IBM Plex Sans Arabic has lower x-height-to-cap-height
     than Inter, so at the same px AR reads ~12% smaller; line-height 1.5 is
     too tight because diacritics + connected-letter forms need vertical
     clearance. */

  /* Type scale: +12% across — AR hierarchy matches EN visual weight. */
  --font-size-base:  1.0625rem;
  --font-size-lg:    1.1875rem;
  --font-size-xl:    1.375rem;
  --font-size-h6:    1.1875rem;
  --font-size-h5:    1.375rem;
  --font-size-h4:    1.625rem;
  --font-size-h3:    2.0625rem;
  --font-size-h2:    2.5rem;
  --font-size-h1:    3.25rem;

  /* Line-height: AR baseline math needs more breathing room. Per Reema charter
     rule 7, AR line-height ≥ 1.6 for body text. The `tight` value sits at 1.5
     — the absolute floor for AR display text where wrap is possible. At 1.5,
     diacritics (فتحة/كسرة) have just enough clearance from descenders
     (ج/ع) of the line above, even on 360px width.
     For a future SVG/icon-component refactor, consider a renamed token
     `--line-height-display-single-line: 1.4` that telegraphs the
     wrap-forbidden contract — out of scope for this PR (Reema follow-up). */
  --line-height-tight:    1.5;
  --line-height-snug:     1.6;
  --line-height-normal:   1.7;
  --line-height-relaxed:  1.85;

  /* Letter spacing reset — IBM Plex Arabic kerning is right out of the box. */
  --letter-spacing-tight:  0;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0;

  /* Touch target floor — mobile-first Saudi reality. */
  --min-touch-target: 2.75rem;
}

/* Reduced motion — respected globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}