/* ==========================================================================
   gridfinity.ir — design tokens
   Single source of truth for colour, type, spacing, radius, motion.
   Derived from docs/design-plan.md. Do not hardcode these values elsewhere.
   RTL-first (dir="rtl" is the default document direction).
   ========================================================================== */

:root {
  /* --- Colour · constant material system (never changes) ------------------ */
  --c-melamine:    #ECEEEC; /* cool white melamine — primary page field       */
  --c-melamine-2:  #E3E6E5; /* one step down — cards / recessed surfaces       */
  --c-anthracite:  #16191A; /* engineered near-black — ink + dark photo stages */
  --c-anthracite-2:#202426; /* raised surface on dark stages                   */
  --c-extrusion:   #9AA0A0; /* anodized aluminium — hairlines, spec/meta type  */
  --c-extrusion-2: #C4C8C7; /* lighter hairline on the light field             */
  --c-buildplate:  #B79A5E; /* PEI build-plate khaki-gold — brand accent       */
  --c-buildplate-ink:#7C6534;/* darkened build-plate for text on light         */
  --c-birch:       #D8B98A; /* birch ply / kraft — premium & made-to-measure   */

  /* Ink roles (semantic) */
  --ink:            var(--c-anthracite);
  --ink-muted:      #565C5C;   /* AA on --c-melamine */
  --ink-faint:      var(--c-extrusion);
  --ink-on-dark:    #E9ECEB;
  --ink-on-dark-muted:#A7ADAC;

  /* Surfaces (semantic) */
  --bg:             var(--c-melamine);
  --surface:        #F4F6F5;
  --surface-sunk:   var(--c-melamine-2);
  --stage:          var(--c-anthracite);   /* dark photography stage */
  --hairline:       var(--c-extrusion-2);
  --hairline-strong:var(--c-extrusion);

  /* --- Filament accent · ONE variable, swapped per vertical --------------- */
  /* Default = brand-neutral (build-plate). Verticals override below.         */
  --filament:      var(--c-buildplate);
  --filament-ink:  var(--c-buildplate-ink);

  /* Focus ring uses the active filament (or build-plate when neutral) */
  --focus-ring:    var(--filament-ink);

  /* --- Type --------------------------------------------------------------- */
  --font-display: "Vazirmatn", "Estedad", system-ui, sans-serif;
  --font-body:    "Vazirmatn", "Estedad", system-ui, sans-serif;
  /* Data/numerals: Vazirmatn with tabular figures (Persian digits render natively,
     unlike a Latin mono where they fall back). Use --font-mono only for Latin tokens. */
  --font-utility: "Vazirmatn", system-ui, sans-serif;
  --font-mono:    "Vazirmatn", ui-monospace, monospace;

  /* Fluid type scale (min .. max) */
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.2rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3.0rem);
  --fs-h2:      clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --fs-small:   0.9rem;
  --fs-utility: 0.82rem;

  --lh-tight:   1.15;   /* display / headings */
  --lh-body:    1.8;    /* Persian running text needs generous leading */
  --tracking-display: -0.02em;
  --tracking-utility:  0.02em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* --- Spacing · derived from the product module (7mm layer / 42mm grid) --- */
  --u:       0.4375rem;               /* ~7px "layer" base unit                */
  --module:  2.625rem;                /* 42px "grid" module                    */
  --space-1: calc(var(--u) * 0.5);    /* 3.5px */
  --space-2: var(--u);                /* 7px   */
  --space-3: calc(var(--u) * 2);      /* 14px  */
  --space-4: calc(var(--u) * 3);      /* 21px  */
  --space-5: var(--module);           /* 42px  */
  --space-6: calc(var(--module) * 1.5);/* 63px */
  --space-7: calc(var(--module) * 2); /* 84px  */
  --space-8: calc(var(--module) * 3); /* 126px — section rhythm */

  --content-max: 75rem;   /* 1200px */
  --measure:     38rem;   /* readable line length for guides */
  --gutter:      var(--space-5);

  /* --- Radius · from the ~3.75mm fillet of a printed Gridfinity bin -------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  /* --- Elevation (restrained; precision, not fluff) ----------------------- */
  --shadow-1: 0 1px 2px rgba(22, 25, 26, 0.06);
  --shadow-2: 0 4px 16px rgba(22, 25, 26, 0.10);

  /* --- Motion tokens (budget & rules: CLAUDE.md §4.2, docs/motion.md) ------ */
  --dur-fast:   120ms;
  --dur:        240ms;
  --dur-slow:   480ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --layer-stagger: 40ms;   /* "Layer Build" reveal band delay */
  --extrusion-stroke: 2px; /* the Extrusion Line signature */
  --motion-scale: 1;       /* set to 0 to globally disable (styleguide toggle) */

  /* --- Z-index scale ------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* Minimum touch target (WCAG 2.1 AA · CLAUDE.md §7) */
  --tap-min: 44px;
}

/* --- Per-vertical filament themes · neutrals stay constant ---------------- */
[data-vertical="vanity"]  { --filament: #C76B94; --filament-ink: #9E4C72; }
[data-vertical="desk"]    { --filament: #2A9DB0; --filament-ink: #1E7284; }
[data-vertical="kitchen"] { --filament: #E0A23C; --filament-ink: #A9741F; }
[data-vertical="craft"]   { --filament: #6FA542; --filament-ink: #4F7A2C; }
[data-vertical="garage"]  { --filament: #E4671E; --filament-ink: #B44A12; }

/* --- Dark photography stage: flip ink/surface roles inside the stage ------ */
.stage,
[data-stage] {
  --bg: var(--c-anthracite);
  --surface: var(--c-anthracite-2);
  --ink: var(--ink-on-dark);
  --ink-muted: var(--ink-on-dark-muted);
  --hairline: #333A3B;
  --focus-ring: var(--filament);
  background: var(--c-anthracite);
  color: var(--ink-on-dark);
}

/* --- Reduced motion → fully static (WCAG · CLAUDE.md §4.2/§7) -------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Global motion off-switch for /styleguide (parallels reduced-motion) */
[data-motion="off"] * ,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}