/* mitec — design tokens
   ──────────────────────────────────────────────────────────────────────────
   The single source of colour truth for the site. See DESIGN.md at the repo
   root for the rules these tokens encode.

   Only the STRUCTURAL scales still come from the bound Mitec Design System —
   spacing, radii and motion, none of which carry colour. Its colour, gradient
   and elevation files are deliberately NOT imported: this system is light-first
   sage and forest green, and the old palette was navy-based, which rule 1 of
   DESIGN.md now forbids outright.

   Components must use the semantic --color-* tokens only. Primitives live here
   and nowhere else; a raw hex in a component file is a defect.
   ────────────────────────────────────────────────────────────────────────── */

@import url("../../_ds/mitec-design-system-43d123c9-3483-4ef5-99d3-fe6170ed1165/tokens/spacing.css");
@import url("../../_ds/mitec-design-system-43d123c9-3483-4ef5-99d3-fe6170ed1165/tokens/radii.css");
@import url("../../_ds/mitec-design-system-43d123c9-3483-4ef5-99d3-fe6170ed1165/tokens/motion.css");

/* ─── Primitives ─────────────────────────────────────────────── */
:root {
  /* Mitec Green — hue ≈163°, anchored on Instagram #57B79A / #12312A */
  --green-50:  #EEF6F2;  --green-100: #D8EDE3;  --green-200: #B3DCC9;
  --green-300: #86C6AC;  --green-400: #57B79A;  --green-500: #2E9478;
  --green-600: #197358;  --green-700: #13604A;  --green-800: #154738;
  --green-900: #12312A;  --green-950: #0B211C;

  /* Sage neutrals — 2–3% green bias */
  --sage-0:   #FFFFFF;  --sage-25:  #F5F7F4;  --sage-50:  #EDF2EE;
  --sage-100: #E2E9E4;  --sage-200: #D2DBD5;  --sage-300: #B8C5BD;
  --sage-400: #7F8D86;  --sage-500: #5F6E65;  --sage-600: #4B5951;
  --sage-700: #34423B;  --sage-800: #22302A;  --sage-900: #13201B;

  /* Amber — Instagram #E0A25C */
  --amber-50: #FCF3E7;  --amber-100: #F7E2C4;  --amber-300: #EDBF84;
  --amber-400: #E0A25C; --amber-700: #8C5313;

  /* Forest surfaces + on-dark text */
  --forest-raised: #173B33;  --forest-elevated: #1E463D;
  --forest-line:   #2E574C;  --forest-line-strong: #5E8479;
  --on-dark-1: #F1F5F2;  --on-dark-2: #B9CBC3;  --on-dark-3: #8FA69C;
  --mint-hover: #72C7AB;
}

/* ─── Type ───────────────────────────────────────────────────────
   Vazirmatn carries every role; Montserrat/Mulish have no Persian glyphs.
   The scale is a 1.414 ratio. Its floor honours DESIGN.md §9: body never
   below 16px, secondary and caption never below 14px, eyebrow never below
   12px — Persian loses joins and dots faster than Latin does.
   PRODUCTION: self-host Vazirmatn from public/fonts; Google Fonts can be
   unreachable from Iran. */
:root {
  --font-display: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --font-body: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  --text-caption: 14px;
  --text-body-sm: 15px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-lead: 23px;
  --text-eyebrow: 12px;
  --text-h4: 23px;
  --text-h3: 32px;
  --text-h2: 45px;
  --text-h1: 52px;
  --text-display-3: clamp(30px, 3.8vw, 45px);
  --text-display-2: clamp(36px, 4.8vw, 56px);
  --text-display-1: clamp(42px, 6.2vw, 76px);
  --text-stat: clamp(30px, 3.2vw, 44px);

  --lh-body: 1.8;      /* DESIGN.md §9 — Persian body needs the extra leading */
  --lh-tight: 1.5;
  --lh-heading: 1.2;
  --lh-display: 1.08;
  /* Zero, not tight: Persian is a joined script, and any tracking — negative
     or positive — opens gaps in the joins (DESIGN.md §13). */
  --ls-display: 0;
  --ls-heading: 0;
  --ls-eyebrow: 0;
}

/* ─── Rhythm + motion ────────────────────────────────────────────
   One idea per viewport: sections breathe on a large fluid pad. The motion
   values extend the system's --dur / --ease scale for the scroll scene and
   reveals, and zero out with it under reduced motion. */
:root {
  --section-pad: clamp(96px, 11vw, 176px);

  --ease-portal: cubic-bezier(.65, 0, .35, 1);
  --dur-reveal: 600ms;
  --dur-media: 700ms;
  --stagger: 70ms;
  --reveal-rise: 28px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-reveal: 0ms; --dur-media: 0ms; --stagger: 0ms; }
}

/* ─── Semantic · light (default) ─────────────────────────────── */
:root {
  --color-bg:               var(--sage-25);
  --color-bg-alt:           var(--sage-50);
  --color-surface:          var(--sage-0);
  --color-surface-elevated: var(--sage-0);
  --color-surface-sunken:   var(--sage-100);

  --color-text-primary:   var(--sage-900);
  --color-text-body:      var(--sage-800);
  --color-text-secondary: var(--sage-600);
  --color-text-muted:     var(--sage-500);
  --color-text-disabled:  var(--sage-400);

  --color-brand:       var(--green-900);
  --color-brand-hover: var(--forest-raised);

  /* Process steps: the fill a reached step takes, its edge, and the edge of
     the one forest "spotlight" step, whose fill is --color-brand (DESIGN.md
     §5). Deliberately not remapped on forest, so a step can cross-fade into
     and out of the spotlight without its layers changing colour mid-fade. */
  --color-step-fill:      var(--green-100);
  --color-step-line:      var(--green-300);
  --color-step-spot-line: var(--forest-line);

  --color-cta:        var(--green-600);
  --color-cta-hover:  var(--green-700);
  --color-cta-active: var(--green-800);
  --color-cta-text:   #FFFFFF;

  --color-tonal:       var(--green-50);
  --color-tonal-hover: var(--green-100);
  --color-tonal-text:  var(--green-700);

  --color-link:       var(--green-600);
  --color-link-hover: var(--green-700);
  --color-accent:     var(--green-400);   /* decorative only on light */

  --color-highlight:      var(--amber-400);
  --color-highlight-soft: var(--amber-100);
  --color-highlight-text: var(--amber-700);

  --color-border:        var(--sage-300);
  --color-border-subtle: var(--sage-200);
  --color-border-strong: var(--sage-400);  /* ≥3:1 — inputs, outline buttons */
  --color-border-hover:  var(--green-200);

  --color-focus:      var(--green-600);
  --color-focus-halo: var(--green-100);

  --color-success: #177044;  --color-success-bg: #E6F4EC;
  --color-warning: #8A5100;  --color-warning-bg: #FFF4DE;
  --color-error:   #B42318;  --color-error-bg:   #FDECEB;
  --color-info:    #2459A8;  --color-info-bg:    #EAF1FB;

  --color-overlay:   rgba(11, 33, 28, .72);
  --color-glow:      rgba(87, 183, 154, .22);
  --color-grid-line: rgba(18, 49, 42, .05);

  --shadow-card:     0 1px 2px rgba(18,49,42,.06), 0 10px 28px -12px rgba(18,49,42,.14);
  --shadow-elevated: 0 2px 4px rgba(18,49,42,.06), 0 18px 40px -16px rgba(18,49,42,.22);
}

/* ─── Semantic · on forest (bands, tiles, footer) ──────────────── */
[data-surface="dark"] {
  --color-bg:               var(--green-900);
  --color-bg-alt:           var(--green-950);
  --color-surface:          var(--forest-raised);
  --color-surface-elevated: var(--forest-elevated);
  --color-surface-sunken:   var(--green-950);

  --color-text-primary:   var(--on-dark-1);
  --color-text-body:      var(--on-dark-2);
  --color-text-secondary: var(--on-dark-2);
  --color-text-muted:     var(--on-dark-3);
  --color-text-disabled:  var(--forest-line-strong);

  --color-cta:        var(--green-400);
  --color-cta-hover:  var(--mint-hover);
  --color-cta-active: var(--green-300);
  --color-cta-text:   var(--green-950);

  --color-tonal:       rgba(87, 183, 154, .14);
  --color-tonal-hover: rgba(87, 183, 154, .22);
  --color-tonal-text:  var(--green-300);

  --color-link:           var(--green-300);
  --color-link-hover:     var(--on-dark-1);
  --color-highlight-text: var(--amber-400);

  --color-border:        var(--forest-line);
  --color-border-subtle: rgba(255, 255, 255, .08);
  --color-border-strong: var(--forest-line-strong);
  --color-border-hover:  var(--forest-line-strong);

  --color-focus:      var(--green-400);
  --color-focus-halo: transparent;
  --color-grid-line:  rgba(255, 255, 255, .035);
  --shadow-card: none;

  /* Portal hero only: the soft highlight that slides across the laptop's
     dark screen (DESIGN.md §8 — on-dark-1 at 6%, a forest object, behind no text). */
  --color-reflection: rgba(241, 245, 242, .06);

  background-color: var(--color-bg);
  color: var(--color-text-body);
}