/* ==========================================================================
   AY Building — tokens
   --------------------------------------------------------------------------
   Overrides kit/tokens.css. Every colour here was SAMPLED from the client's
   logo, not guessed:

     charcoal  #44484B          median of the neutral ink, n=21,374 px
     gold      #C39849          median of the gold, n=20,695 px
     gold range #A9833C .. #D4A851   (the mark carries a vertical gradient)

   The gold is 2.65:1 on white — fine as a fill, illegal as text. Hence the
   --brand / --brand-text split: --brand is the real gold, --brand-text is
   darkened to #866727 for light theme — dark enough to clear 4.5:1 on BOTH
   --bg and the tinted --surface, since brand-coloured labels sit on each.
   On the dark ground the real
   gold clears 6.98:1, so dark theme uses it directly.
   ========================================================================== */

:root {
  /* --- Surface -------------------------------------------------------- */
  --bg:        #FBFBFA;
  --surface:   #F1F1EE;
  --ink:       #24272A;
  --muted:     #5A5F65;               /* 6.20:1 on --bg */
  --line:      rgba(36, 39, 42, 0.16);
  --line-soft: rgba(36, 39, 42, 0.07);

  /* --- Brand ---------------------------------------------------------- */
  --brand:      #C39849;
  --brand-text: #866727;   /* 5.07:1 on --bg, 4.66:1 on --surface */
  --on-brand:   #1A1C1F;
  --charcoal:   #44484B;              /* the logo's own neutral */

  /* --- Type ----------------------------------------------------------- */
  /* IBM Plex Sans Arabic carries both scripts, and its Latin is IBM Plex Sans
     — which has the Turkish dotless ı, İ, ş, ğ we need for the TR build.
     Plex Mono handles dimensions and spec figures: an engineering drawing
     wants tabular, monospaced numerals. */
  --font-display: "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
  /* An Arabic-capable face MUST be named before the generics. ui-monospace and
     monospace are generic families the browser always resolves, so nothing
     after them is ever consulted — every Arabic glyph would land on the OS
     monospace at one fixed advance per letter, tearing the joins apart. This
     shipped to production on levelup.ly and passed every automated check.
     Fallback is per-glyph, so Latin and digits stay monospaced and columns
     still align; only the Arabic runs (مم) fall through to Plex Sans Arabic. */
  --font-mono:    "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.48rem + 1.35vw, 2.60rem);
  --step-4:  clamp(2.10rem, 1.64rem + 2.30vw, 3.50rem);
  --step-5:  clamp(2.40rem, 1.66rem + 3.70vw, 4.50rem);

  --leading-tight: 1.30;
  --leading-body:  1.75;
  /* Tracking is size-specific, never one value for everything: large display
     text reads too loose as it grows, small text needs a touch more air.
     Arabic takes none of it in either direction — positive tracking is the
     damaging one, it pulls apart the letters of a single word. */
  --track-display: -0.035em;
  --track-title:   -0.022em;
  --track-body:     0em;
  --tracking-tight: var(--track-title);

  /* --- Space ---------------------------------------------------------- */
  --wrap: 1240px;
  --pad:  clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(3.5rem, 9vw, 7.5rem);
  --gap:  clamp(1rem, 2.5vw, 2rem);

  --radius:    2px;
  --radius-lg: 5px;

  /* --- Motion --------------------------------------------------------- */
  --hover:  0.2s linear;
  --reveal: 0.9s cubic-bezier(0.06, 0.81, 0, 0.98);

  --numerals: normal;
  --counter-style: decimal;

  /* --- Technical drawings ---------------------------------------------
     Every product on this site is drawn, not photographed. These name the
     faces of an isometric solid so one palette drives all three families. */
  --dw-face:  #D8DADC;                /* front face — the sectioned plane */
  --dw-top:   #EDEEEF;                /* lit top face */
  --dw-side:  #B4B8BD;                /* shaded side face */
  --dw-line:  #44484B;                /* outline */
  --dw-web:   #9AA0A8;                /* internal chamber webs */

  --dw-gold:      #C39849;            /* polyamide break, gaskets, seals */
  --dw-gold-top:  #D9B87A;
  --dw-gold-side: #A9833C;

  --dw-glass:      rgba(122, 168, 188, 0.38);
  --dw-glass-top:  rgba(158, 200, 216, 0.46);
  --dw-glass-side: rgba(96, 138, 158, 0.46);
  --dw-glass-line: #7FA3B4;

  --dw-dim:   #6E747C;                /* dimension + extension lines */
  --dw-label: #24272A;                /* dimension text */

  /* Manufacturer mark washed in behind a drawing. Deliberately neutral, not
     gold: Polymelt is a supplier's brand, not AY's, and tinting someone
     else's mark with your own accent misrepresents both. */
  --dw-brand-wash: rgba(68, 72, 75, 0.11);

  /* --- PENDING content flags -------------------------------------------
     Deliberately NOT the brand gold. A missing figure must never read as a
     styled accent — it has to look wrong. Rust + dashes does that. */
  --flag-ink:  #A03C1E;
  --flag-bg:   rgba(160, 60, 30, 0.09);
  --flag-line: rgba(160, 60, 30, 0.45);

  color-scheme: light;
}

/* Dark, twice: once for the untouched visitor, once for the explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161A; --surface: #1D2025; --ink: #F2F1EF; --muted: #A2A6AD;
    --line: rgba(242,241,239,.16); --line-soft: rgba(242,241,239,.07);
    --brand: #C39849; --brand-text: #D4A851; --on-brand: #14161A;
    --charcoal: #C8CBD0;

    --dw-face: #3A3E44; --dw-top: #4A4F56; --dw-side: #2A2D32;
    --dw-line: #C8CBD0; --dw-web: #767C85;
    --dw-gold: #C39849; --dw-gold-top: #D9B87A; --dw-gold-side: #A9833C;
    --dw-glass: rgba(122,168,188,.24); --dw-glass-top: rgba(158,200,216,.30);
    --dw-glass-side: rgba(96,138,158,.34); --dw-glass-line: #6E8E9E;
    --dw-dim: #949AA2; --dw-label: #F2F1EF;
    --dw-brand-wash: rgba(242, 241, 239, 0.10);

    --flag-ink: #E08A66; --flag-bg: rgba(224,138,102,.12);
    --flag-line: rgba(224,138,102,.42);

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14161A; --surface: #1D2025; --ink: #F2F1EF; --muted: #A2A6AD;
  --line: rgba(242,241,239,.16); --line-soft: rgba(242,241,239,.07);
  --brand: #C39849; --brand-text: #D4A851; --on-brand: #14161A;
  --charcoal: #C8CBD0;

  --dw-face: #3A3E44; --dw-top: #4A4F56; --dw-side: #2A2D32;
  --dw-line: #C8CBD0; --dw-web: #767C85;
  --dw-gold: #C39849; --dw-gold-top: #D9B87A; --dw-gold-side: #A9833C;
  --dw-glass: rgba(122,168,188,.24); --dw-glass-top: rgba(158,200,216,.30);
  --dw-glass-side: rgba(96,138,158,.34); --dw-glass-line: #6E8E9E;
  --dw-dim: #949AA2; --dw-label: #F2F1EF;
  --dw-brand-wash: rgba(242, 241, 239, 0.10);

  --flag-ink: #E08A66; --flag-bg: rgba(224,138,102,.12);
  --flag-line: rgba(224,138,102,.42);

  color-scheme: dark;
}