/*
 * Forra design tokens — web mirror of mobile/lib/design-tokens.ts.
 *
 * Source of truth: mobile/lib/design-tokens.ts (palette.light).
 * Update this file IN THE SAME PR as any mobile token change.
 *
 * Why CSS custom properties: zero JavaScript framework constraint
 * means we can't share tokens at build time. CSS variables compile
 * to zero runtime cost (browser-native), are themable per locale,
 * and degrade gracefully on old browsers.
 */

:root {
  /* Sand neutrals — surfaces, text, dividers */
  --color-paper: #F7F2EA;
  --color-paper-2: #F1EADE;
  --color-paper-3: #E8DECC;
  --color-canvas: #FCF8F1;
  --color-canvas-2: #FFFEF9;
  --color-hairline: #E2D6BF;
  --color-hairline-2: #D9CAAE;

  /* Ink ramp — text */
  --color-ink: #2A2520;
  --color-ink-2: #5C5751;
  --color-ink-3: #8B847B;
  --color-ink-4: #B8B0A2;
  --color-ink-on-rust: #FFFEF9;

  /* Brand accent — Rust (PRIMARY = rust-400) */
  --color-rust-50: #FAEAE0;
  --color-rust-100: #F2CDB6;
  --color-rust-200: #E5A37C;
  --color-rust-300: #D27A4D;
  --color-rust-400: #B85A2E;
  --color-rust-500: #983F1C;
  --color-rust-600: #6E2B12;
  --color-focus-ring: rgba(184, 90, 46, 0.32);

  /* Semantic — threshold colors */
  --color-ontrack-50: #E5EFE3;
  --color-ontrack-300: #6FA365;
  --color-ontrack-500: #3F7038;
  --color-ontrack-700: #244520;
  --color-warn-50: #FAEDD0;
  --color-warn-300: #E2B158;
  --color-warn-500: #B5832A;
  --color-warn-700: #6E4C0E;
  --color-over-50: #F7DAD3;
  --color-over-300: #D77464;
  --color-over-500: #B33A28;
  --color-over-700: #6F1A0E;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-5xl: 56px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.5;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.1em;

  /* Spacing — 4 / 8 / 12 / 16 / 20 / 28 / 40 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;

  --page-padding-x: 20px;
  --block-padding-y: 16px;

  /* Radii */
  --radius-input: 8px;
  --radius-card: 14px;
  --radius-sheet: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 0 rgba(42, 37, 32, 0.05);
  --shadow-card: 0 6px 18px rgba(42, 37, 32, 0.16);
  --shadow-pop: 0 16px 36px rgba(42, 37, 32, 0.2);
  --shadow-rust: 0 6px 16px rgba(98, 33, 12, 0.3);

  /* Motion */
  --dur-quick: 180ms;
  --dur-base: 260ms;
  --dur-bar: 600ms;
  --dur-sweep: 1200ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Arabic font scale — 1.18x (mirror of mobile localeFontScale("ar") = 1.18) */
html[lang="ar"] {
  --fs-xs: 14px;
  --fs-sm: 15px;
  --fs-base: 18px;
  --fs-md: 19px;
  --fs-lg: 21px;
  --fs-xl: 26px;
  --fs-2xl: 31px;
  --fs-3xl: 38px;
  --fs-4xl: 47px;
  --fs-5xl: 66px;

  /* Plus Jakarta Sans has no Arabic glyphs (Latin/Cyrillic/Greek-only design).
   * Override --font-display to use Public Sans Arabic — same family used for
   * body text, weight differences carry the visual hierarchy. */
  --font-display: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reduced-motion override — WCAG 2.1 SC 2.3.3 */
@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;
  }
}

/* Font-face declarations — self-hosted WOFF2 (downloaded per T008 D-task) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/PlusJakartaSans-Medium.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/PublicSans-Regular.woff2') format('woff2');
}

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

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/PublicSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

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

/* Arabic subset — loaded only when html[lang="ar"] */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/PublicSans-Arabic-Regular.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/PublicSans-Arabic-Medium.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/PublicSans-Arabic-SemiBold.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}