/* ==========================================================================
   Tabesh Raad — design tokens
   The single source of colour, type, spacing and motion. Nothing below this
   file should hard-code a hex value.

   Brand ratio: 70% white / off-white · 20% charcoal · 10% teal.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --tr-teal: #00b39a; /* Decorative marks and large display type only */
  --tr-teal-600: #009d87;
  --tr-teal-700: #007d6d; /* Text teal — see the note below */
  --tr-teal-800: #006e60; /* Hover state for teal fills */
  --tr-teal-on-dark: #3ad4bb; /* Fills / accents on charcoal (pairs with dark ink) */
  --tr-teal-glow: rgba(0, 179, 154, 0.55);
  --tr-teal-soft: rgba(0, 179, 154, 0.12);

  /*
   * ACCESSIBILITY NOTE — read before using teal.
   *
   * White on --tr-teal measures 2.65:1, which fails WCAG AA (4.5:1) for text
   * and even fails 3:1 for meaningful borders. So:
   *   text or fill carrying text  -> --tr-teal-700
   *   decorative marks, hairlines -> --tr-teal
   *
   * --tr-teal-700 was #008473, chosen because it clears 4.5:1 on pure white.
   * An audit of the rendered page caught it at 4.41:1 against --tr-off-white,
   * which is the background it actually sits on in most sections — a near miss
   * that only shows up when measured in place rather than on paper. #007d6d
   * clears both: 4.83:1 on off-white, 5.06:1 on white.
   *
   * Raised with the client as a brand-refinement note; do not "fix" this by
   * quietly lightening the text back again.
   */

  /*
   * Certification / type-test signal. Used sparingly and never as decoration.
   * Darkened from the supplied #c47a3a, which measured 3.39:1 on white and
   * failed AA — it is used for small readout text like "TYPE TEST · نیرو".
   * #9e5e1c gives 5.16:1 on white and 4.93:1 on off-white.
   */
  --tr-copper: #9e5e1c;
  --tr-copper-soft: rgba(158, 94, 28, 0.14);
  --tr-copper-mark: #c47a3a; /* Original tone, for non-text marks only */
  --tr-copper-on-dark: #e0a367; /* TYPE TEST marks on charcoal */

  --tr-charcoal: #1f2933;
  --tr-charcoal-900: #151d24;
  --tr-gray: #666666;
  --tr-light-gray: #d9d9d9;
  --tr-off-white: #f8fafb;
  --tr-white: #ffffff;

  /* ---- Semantic --------------------------------------------------------- */
  --color-bg: var(--tr-white);
  --color-bg-alt: var(--tr-off-white);
  --color-bg-dark: var(--tr-charcoal);
  --color-heading: var(--tr-charcoal);
  --color-text: var(--tr-gray);
  --color-text-invert: rgba(255, 255, 255, 0.82);
  --color-heading-invert: #ffffff;
  --color-border: var(--tr-light-gray);
  --color-border-subtle: rgba(31, 41, 51, 0.08);
  --color-accent: var(--tr-teal);
  --color-accent-text: var(--tr-teal-700);

  /* ---- Typography ------------------------------------------------------- */
  --font-body: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: var(--font-body);
  /* Technical "readout" voice — ratings, standards, indices. System stack only,
     so it never blocks render and never costs a network request. */
  --font-mono:
    ui-monospace, "Cascadia Code", "Roboto Mono", "SFMono-Regular", Consolas,
    monospace;

  --fs-hero: clamp(2.5rem, 6vw, 4.75rem);
  --fs-h1: clamp(2.125rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.1875rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.75;

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

  /* ---- Spacing ---------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --section-pad: clamp(4.5rem, 9vw, 9rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Shadows (subtle — no shadow soup) -------------------------------- */
  --shadow-sm: 0 1px 2px rgba(31, 41, 51, 0.06);
  --shadow-md: 0 12px 40px rgba(31, 41, 51, 0.1);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --dur-draw: 1500ms;

  /* ---- Blueprint system ------------------------------------------------- */
  --bp-line: rgba(31, 41, 51, 0.055);
  --bp-line-strong: rgba(31, 41, 51, 0.11);
  --bp-cols: 12;
  --bp-unit: 8px;

  --bracket-size: 14px;
  --bracket-w: 1px;
  --bracket-color: var(--bp-line-strong);
  --bracket-color-live: var(--tr-teal);

  --readout-size: 0.6875rem;
  --readout-track: 0.14em;

  --sld-stroke: 1.4px;
  --sld-color: var(--tr-charcoal);
  --sld-dim: rgba(31, 41, 51, 0.28);
  --terminal-r: 3.5px;

  /* ---- Z-index scale ---------------------------------------------------- */
  --z-rail: 40;
  --z-header: 100;
  --z-drawer: 180;
  --z-overlay: 200;
}

/* Fewer columns on small screens or the grid turns to mush. */
@media (max-width: 768px) {
  :root {
    --bp-cols: 4;
  }
}

/*
 * Dark context. Sections opt in with .is-dark and every semantic token flips —
 * components never need a duplicated dark rule of their own.
 */
.is-dark {
  --color-bg: var(--tr-charcoal);
  --color-bg-alt: var(--tr-charcoal-900);
  --color-heading: var(--color-heading-invert);
  --color-text: var(--color-text-invert);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-accent-text: var(--tr-teal-on-dark);
  --bp-line: rgba(255, 255, 255, 0.06);
  --bp-line-strong: rgba(255, 255, 255, 0.13);
  --bracket-color: rgba(255, 255, 255, 0.16);
  --sld-color: rgba(255, 255, 255, 0.72);
  --sld-dim: rgba(255, 255, 255, 0.3);
}

/* Text selection in brand teal. */
::selection {
  background: var(--tr-teal);
  color: var(--tr-white);
}