/* MANSCOM Design System · tokens
   Apple HIG structure (semantic system colors, grouped backgrounds, materials, type ramp)
   rendered in the MANSCOM brand: charcoal / white / warm gray, gold as the single tint.
   Layering: primitives → semantic tokens (light + dark) → components (components.css). */

/* ── Type ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Cairo";
  src: url("/assets/fonts/cairo-arabic-wght-normal.woff2") format("woff2");
  font-weight: 200 1000; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  src: url("/assets/fonts/cairo-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000; font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-display: swap;
}

:root {
  /* Primitives */
  --charcoal: #121214;
  --slate: #3a3a3e;
  --warm-gray: #96969b;
  --white: #ffffff;
  --gold-300: #d6b06a;
  --gold-500: #c49b4a;
  --gold-700: #8f6a24;
  --green: #34c759;
  --red: #ff3b30;

  /* Font families */
  --font: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-brand: "Montserrat", "Cairo", sans-serif;

  /* Type ramp (HIG sizes; the large sizes scale on wide screens) */
  --t-display: 700 clamp(40px, 7.2vw, 88px)/1.08 var(--font);
  --t-large-title: 800 clamp(32px, 5vw, 56px)/1.12 var(--font);
  --t-title-1: 700 clamp(26px, 3.4vw, 36px)/1.25 var(--font);
  --t-title-2: 700 22px/1.3 var(--font);
  --t-title-3: 600 20px/1.35 var(--font);
  --t-headline: 600 17px/1.5 var(--font);
  --t-body: 400 17px/1.65 var(--font);
  --t-callout: 400 16px/1.55 var(--font);
  --t-subhead: 400 15px/1.5 var(--font);
  --t-footnote: 400 13px/1.45 var(--font);
  --t-caption: 500 12px/1.35 var(--font);

  /* Spacing: 4 pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --gutter: max(20px, env(safe-area-inset-left));
  --content: 1120px;
  --tap: 44px;                 /* minimum hit target */

  /* Radii (continuous-corner look via generous radii) */
  --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* Motion */
  --dur-1: 120ms;              /* press, color */
  --dur-2: 220ms;              /* small moves, toggles */
  --dur-3: 380ms;              /* panels, segmented thumb */
  --dur-4: 560ms;              /* sheets, page-level */
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.7%, 1.051 22.3%, 1.062 25.1%, 1.056 28.4%, 1.021 37.4%, 1.002 46.4%, .997 55%, 1);

  /* Layers */
  --z-nav: 50; --z-fab: 40; --z-scrim: 90; --z-sheet: 100; --z-overlay: 120;

  /* ── Semantic colors · light ── */
  color-scheme: light dark;
  --bg: #f2f2f7;               /* systemGroupedBackground */
  --bg-elevated: #ffffff;      /* secondarySystemGroupedBackground */
  --bg-sheet: #f2f2f7;
  --bg-sheet-elevated: #ffffff;
  --label: #000000;
  --label-2: rgba(60, 60, 67, .62);
  --label-3: rgba(60, 60, 67, .32);
  --separator: rgba(60, 60, 67, .2);
  --fill: rgba(120, 120, 128, .12);
  --fill-2: rgba(120, 120, 128, .2);
  --thumb: #ffffff;
  --material: rgba(250, 250, 250, .76);      /* regular material (nav bar) */
  --material-thick: rgba(250, 250, 250, .9);
  --tint: var(--gold-500);
  --tint-label: var(--gold-700);             /* gold text on light surfaces (AA) */
  --on-tint: var(--charcoal);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, .18);
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
}

/* ── Semantic colors · dark (system setting, unless the visitor picked light) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --bg-elevated: #1c1c1e; --bg-sheet: #1c1c1e; --bg-sheet-elevated: #2c2c2e;
    --label: #ffffff; --label-2: rgba(235, 235, 245, .62); --label-3: rgba(235, 235, 245, .32);
    --separator: rgba(84, 84, 88, .62); --fill: rgba(120, 120, 128, .24); --fill-2: rgba(120, 120, 128, .36);
    --thumb: #636366; --material: rgba(22, 22, 24, .7); --material-thick: rgba(28, 28, 30, .9);
    --tint-label: var(--gold-300); --shadow-1: none;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-elevated: #1c1c1e; --bg-sheet: #1c1c1e; --bg-sheet-elevated: #2c2c2e;
  --label: #ffffff; --label-2: rgba(235, 235, 245, .62); --label-3: rgba(235, 235, 245, .32);
  --separator: rgba(84, 84, 88, .62); --fill: rgba(120, 120, 128, .24); --fill-2: rgba(120, 120, 128, .36);
  --thumb: #636366; --material: rgba(22, 22, 24, .7); --material-thick: rgba(28, 28, 30, .9);
  --tint-label: var(--gold-300); --shadow-1: none;
}

/* Surfaces that are always dark (the Build stage, result card), whatever the theme */
.on-dark {
  --label: #ffffff; --label-2: rgba(235, 235, 245, .66); --label-3: rgba(235, 235, 245, .34);
  --separator: rgba(255, 255, 255, .16); --fill: rgba(120, 120, 128, .32); --fill-2: rgba(120, 120, 128, .44);
  --thumb: #636366; --material: rgba(28, 28, 30, .55); --tint-label: var(--gold-300);
  color: var(--label);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}