/* ============================================================
   SAKKARY MACHINERY — design tokens · MIXED BANDS
   A white page that drops into graphite where the machines are.
   Every component reads semantic tokens only; a section switches
   its whole palette by carrying .band--dark. Nothing else changes.
   ============================================================ */

:root {
  /* ---- Brand constants (sampled from the real logo artwork) ---- */
  --red:       #EA2336;
  --red-light: #F46B85;
  --red-deep:  #D2201B;
  --blue:      #3D58A9;
  --blue-deep: #243F86;

  /* ---- Semantic palette: light is the default state ---- */
  --bg:        #FFFFFF;
  --bg-alt:    #F2F3F5;
  --surface:   #FFFFFF;
  --surface-2: #F7F8FA;
  --line:      #E2E4E8;
  --line-soft: #EDEEF1;

  --fg:   #14161A;   /* 16.6:1 on white */
  --fg-2: #4C525A;   /*  8.3:1 */
  --fg-3: #6B727B;   /*  4.9:1 — the floor for real text */

  --accent:        #D2201B;  /* red as TEXT on white — 5.3:1     */
  --accent-bright: #EA2336;  /* red as GRAPHIC — rules, marks    */
  --accent-fill:   #D91A2D;  /* button ground, white label 4.9:1 */
  --accent-on:     #FFFFFF;
  --cool:          #2B4A8B;  /* blue as text on white — 8.6:1    */

  --shadow-1: 0 1px 2px rgba(16, 20, 28, .06);
  --shadow-2: 0 10px 30px -12px rgba(16, 20, 28, .18);
  --shadow-3: 0 28px 60px -28px rgba(16, 20, 28, .28);

  /* ---- Type ---- */
  --font-display: "Saira Condensed", "IBM Plex Sans Arabic", Impact, sans-serif;
  --font-body:    "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --fs-micro:  0.6875rem;
  --fs-xs:     0.8125rem;
  --fs-sm:     0.9375rem;
  --fs-base:   1rem;
  --fs-lg:     1.125rem;
  --fs-xl:     1.375rem;
  --fs-2xl:    clamp(1.5rem,  1.1rem + 1.6vw, 2.125rem);
  --fs-3xl:    clamp(1.9rem,  1.25rem + 2.9vw, 3.25rem);
  --fs-hero:   clamp(2.9rem,  1.2rem + 7.9vw, 8rem);

  --lh-tight:  0.94;
  --lh-snug:   1.18;
  --lh-body:   1.62;

  --tr-display: -0.022em;
  --tr-mono:     0.16em;

  /* ---- Spacing. Bands carry the separation now, so the vertical
         measure is roughly a third tighter than the dark build. ---- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 44px;  --s-8: 60px;
  --s-9: 80px;   --s-10:104px;  --s-11:136px;

  /* Each band edge is now a colour change, so the eye already reads
     the boundary — the padding only has to give the content air. */
  --section-y: clamp(46px, 4.7vw, 78px);
  --gutter:    clamp(22px, 4.4vw, 68px);
  --maxw:      1320px;
  --maxw-text: 66ch;

  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-cut:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.7, 0, .84, 0);
  --ease-mech: cubic-bezier(.65, .05, .36, 1);
  --dur-1: 150ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
  --dur-4: 700ms;

  /* The cursor lives outside every band, so it cannot inherit a
     band palette — it needs one pair of colours legible on all of
     them. Blue idle, red over anything clickable. */
  --cursor-c:   #4C6FD0;   /* 4.7:1 on white · 4.1:1 on graphite */
  --cursor-hot: #EA2336;

  /* The header sits ABOVE the drawer on purpose. The drawer is a
     full-screen overlay, so with the old order it covered its own
     close button and the menu could not be dismissed on a phone. */
  --z-cursor:  200;
  --z-drawer:   70;
  --z-header:   80;
  --z-modal:   100;

  --header-h: 74px;
}

/* ---- The dark band. Any section carrying this class repaints its
       own palette; components underneath need no dark variants. ---- */
.band--dark {
  --bg:        #0B0C0F;
  --bg-alt:    #121419;
  --surface:   #171A21;
  --surface-2: #1D212A;
  --line:      #262A33;
  --line-soft: #1B1E25;

  --fg:   #F2F4F7;   /* 17:1 on graphite */
  --fg-2: #A8AEB8;   /*  8.4:1 */
  --fg-3: #7E858F;   /*  4.9:1 */

  --accent:        #F4626C;  /* red lifted for text on graphite — 6.2:1 */
  --accent-bright: #EA2336;
  --accent-fill:   #D91A2D;
  --accent-on:     #FFFFFF;
  --cool:          #6E8AE0;  /* blue lifted — 5.8:1 */

  --shadow-1: none;
  --shadow-2: 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-3: 0 28px 60px -28px rgba(0, 0, 0, .8);

  background: var(--bg);
  color: var(--fg);
}

/* A light band that is not pure white, used to break long white runs. */
.band--tint { background: var(--bg-alt); }

:root[data-lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Saira Condensed", sans-serif;
  --font-body:    "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --tr-display: 0;
  --lh-tight: 1.14;
  --lh-snug:  1.35;
}

@media (max-width: 860px) { :root { --header-h: 64px; } }