/* ==========================================================================
   VEMA Engineering — design tokens
   Colour, type, spacing, motion. Change a value here and it changes everywhere.
   ========================================================================== */

:root {
  /* ---- Brand palette (fixed, both themes) ------------------------------- */
  --navy-900:  #06090F;   /* page background — a de-energised panel */
  --navy-800:  #0A1B3D;   /* logo ellipse core */
  --navy-700:  #0F2A55;
  --navy-600:  #163A6B;   /* logo ellipse edge */
  --bolt-500:  #F2C230;   /* the lightning bolt — primary accent */
  --bolt-300:  #FFDB6E;   /* hover / glow */
  --bolt-700:  #B8901A;   /* accent that passes contrast on light backgrounds */
  --grey-300:  #D7D7D2;   /* RAL 7035 panel enamel */
  --grey-500:  #9AA3AF;
  --safety-red:#B01F24;   /* from VEMA's own danger labels — warnings only */
  --copper:    #B87333;

  /* ---- Semantic tokens: DARK theme (default) ---------------------------- */
  --bg:            var(--navy-900);
  --bg-raised:     #0C121C;
  --bg-sunken:     #04060A;
  --surface:       #101827;
  --surface-hover: #16202F;
  --border:        #1E2A3D;
  --border-strong: #2C3B52;
  --text:          #EAEEF5;
  --text-muted:    #98A3B4;
  --text-faint:    #808D9F;              /* 5.6:1 on --bg — the smallest text on the site */
  --accent:        var(--bolt-500);      /* icons, rules, bullets — needs 3:1  */
  --accent-text:   var(--bolt-500);      /* accent used AS TEXT — needs 4.5:1  */
  --accent-hover:  var(--bolt-300);
  --accent-ink:    var(--navy-900);      /* text ON an accent-filled surface */
  --accent-quiet:  rgba(242, 194, 48, 0.14);
  --focus:         var(--bolt-500);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 24px 64px -16px rgba(0, 0, 0, 0.8);
  --photo-filter: contrast(1.06) saturate(1.02) brightness(0.97);
  --scrim: linear-gradient(180deg, rgba(6, 9, 15, 0.35) 0%, rgba(6, 9, 15, 0.82) 60%, var(--navy-900) 100%);
  --grid-line: rgba(255, 255, 255, 0.028);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:            #F4F5F7;
  --bg-raised:     #FFFFFF;
  --bg-sunken:     #E8EAEE;
  --surface:       #FFFFFF;
  --surface-hover: #F8F9FB;
  --border:        #DCE0E7;
  --border-strong: #B9C0CC;
  --text:          #0A1B3D;
  --text-muted:    #4A5568;
  --text-faint:    #5A6472;              /* 5.0:1 on --bg-sunken */
  /* The brand yellow is unusable as ink on a light background — #F2C230 on white
     is 1.7:1. These are the two darkened golds that carry the accent instead. */
  --accent:        #96760F;              /* graphics / borders — 3.9:1 on --bg  */
  --accent-text:   #7A5E08;              /* accent as text     — 5.5:1 on --bg  */
  --accent-hover:  #7A5E08;
  --accent-ink:    var(--navy-900);
  --accent-quiet:  rgba(184, 144, 26, 0.12);
  --focus:         #8A6D0E;
  --shadow-1: 0 1px 2px rgba(10, 27, 61, 0.08);
  --shadow-2: 0 8px 24px -10px rgba(10, 27, 61, 0.18);
  --shadow-3: 0 24px 64px -20px rgba(10, 27, 61, 0.28);
  --photo-filter: contrast(1.03) saturate(1.03);
  --scrim: linear-gradient(180deg, rgba(6, 9, 15, 0.30) 0%, rgba(6, 9, 15, 0.70) 55%, rgba(6, 9, 15, 0.92) 100%);
  --grid-line: rgba(10, 27, 61, 0.035);
  color-scheme: light;
}

/* The hero and other photo bands stay dark in both themes — a lit panel in a
   dark plant room. Anything inside .on-dark uses the dark semantic set. */
.on-dark {
  --surface:       rgba(16, 24, 39, 0.72);
  --surface-hover: rgba(22, 32, 47, 0.86);
  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --text:          #EAEEF5;
  --text-muted:    #B4BECD;
  --text-faint:    #97A2B2;
  --accent:        var(--bolt-500);
  --accent-text:   var(--bolt-500);
  --accent-hover:  var(--bolt-300);
  --focus:         var(--bolt-500);
  color-scheme: dark;
}

:root {
  /* ---- Type ------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:    'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  --fs-base: 1rem;          /* 16px — overridden to 17px for Arabic in base.css */
  --lh-base: 1.6;           /* Arabic gets 1.9 */

  /* Fluid scale: min at 375px, max at 1440px */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --fs-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --fs-md:   clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem);
  --fs-lg:   clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
  --fs-xl:   clamp(1.25rem, 1.13rem + 0.55vw, 1.625rem);
  --fs-2xl:  clamp(1.5rem, 1.28rem + 0.95vw, 2.25rem);
  --fs-3xl:  clamp(1.875rem, 1.45rem + 1.85vw, 3.25rem);
  --fs-hero: clamp(2.5rem, 1.55rem + 4.1vw, 6rem);

  --tracking-tight: -0.02em;
  --tracking-wide:  0.06em;
  --tracking-label: 0.14em;

  /* ---- Space (4px base) -------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---- Layout ------------------------------------------------------------ */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --header-h: 68px;

  /* ---- Shape — industrial equipment, not a consumer app ------------------ */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;   /* used only for the status dot and the WhatsApp bubble */

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 180ms;
  --t-mid:  260ms;
  --t-slow: 450ms;

  /* Set to 0 by base.css under prefers-reduced-motion so ambient loops stop. */
  --ambient: 1;
}