/* ==========================================================================
   Gulf Safety — design tokens
   Every colour, type and spacing value on the site is defined here.
   Rationale for each choice is in DESIGN.md.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------
     Sampled from images/gslogo2.png: a blue / green / red tricolour.
     Blue dominates; green means normal; red means alarm.                    */
  --blue-rgb:        16 80 160;    /* #1050A0  7.84:1 on white               */
  --blue-deep-rgb:   10 58 115;    /* #0A3A73  hover / secondary             */
  --blue-lift-rgb:  111 168 232;   /* #6FA8E8  7.33:1 on --panel             */

  --green-rgb:       16 144 64;    /* #109040  indicator lamp only (4.13)    */
  --green-deep-rgb:  11 107 47;    /* #0B6B2F  6.65:1 — green as type        */
  --green-lift-rgb:  47 208 107;   /* #2FD06B  8.99:1 on --panel             */

  --red-rgb:        224 32 48;     /* #E02030  alarm accent, graphic only    */
  --red-deep-rgb:   196 20 37;     /* #C41425  6.05:1 — red as type          */
  --red-lift-rgb:   255 90 70;     /* #FF5A46  5.90:1 on --panel             */

  --amber-rgb:      245 166 35;    /* #F5A623  the self-test sweep only      */

  /* ---- Surfaces -------------------------------------------------------- */
  --panel-rgb:       11 22 34;     /* #0B1622  instrument faceplate          */
  --panel-2-rgb:     18 32 47;     /* #12202F  raised plate on the faceplate */
  --paper-rgb:      255 255 255;   /* #FFFFFF  primary band, cards           */
  --mist-rgb:       242 245 248;   /* #F2F5F8  alternating band              */

  /* ---- Ink ------------------------------------------------------------- */
  --ink-rgb:         22 33 43;     /* #16212B  headings + body on light      */
  --steel-rgb:       85 99 111;    /* #55636F  6.18:1 secondary text         */
  --slate-rgb:      154 170 184;   /* #9AAAB8  7.65:1 secondary on --panel   */

  /* ---- Hairlines ------------------------------------------------------- */
  --line-rgb:       221 228 235;   /* #DDE4EB                                */
  --line-strong-rgb: 198 210 221;  /* #C6D2DD                                */
  --line-dark-rgb:   31 48 66;     /* #1F3042  hairline on the faceplate     */

  /* ---- Flat aliases ---------------------------------------------------- */
  --blue:        rgb(var(--blue-rgb));
  --blue-deep:   rgb(var(--blue-deep-rgb));
  --blue-lift:   rgb(var(--blue-lift-rgb));
  --green:       rgb(var(--green-rgb));
  --green-deep:  rgb(var(--green-deep-rgb));
  --green-lift:  rgb(var(--green-lift-rgb));
  --red:         rgb(var(--red-rgb));
  --red-deep:    rgb(var(--red-deep-rgb));
  --red-lift:    rgb(var(--red-lift-rgb));
  --amber:       rgb(var(--amber-rgb));
  --panel:       rgb(var(--panel-rgb));
  --panel-2:     rgb(var(--panel-2-rgb));
  --paper:       rgb(var(--paper-rgb));
  --mist:        rgb(var(--mist-rgb));
  --ink:         rgb(var(--ink-rgb));
  --steel:       rgb(var(--steel-rgb));
  --slate:       rgb(var(--slate-rgb));
  --line:        rgb(var(--line-rgb));
  --line-strong: rgb(var(--line-strong-rgb));
  --line-dark:   rgb(var(--line-dark-rgb));

  /* ---- Type ------------------------------------------------------------
     IBM Plex: condensed for panel-label display, sans for prose,
     mono for engineering data. See DESIGN.md.                              */
  --font-display: 'IBM Plex Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-utility: 0.75rem;    /* 12 — eyebrows, labels, zone addresses        */
  --fs-fine:    0.875rem;   /* 14 — captions, footnotes                     */
  --fs-small:   0.9375rem;  /* 15 — dense lists, table cells                */
  --fs-body:    1.0625rem;  /* 17 — body                                    */
  --fs-lead:    1.1875rem;  /* 19 — lead paragraph                          */
  --fs-h4:      1.375rem;   /* 22                                           */
  --fs-h3:      1.75rem;    /* 28                                           */
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);   /* 28 → 40       */
  --fs-h1:      clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);   /* 34 → 56       */

  --lh-body: 1.7;
  --lh-tight: 1.15;
  --tracking-utility: 0.14em;
  --tracking-display: -0.02em;
  --measure: 68ch;

  /* ---- Layout ---------------------------------------------------------- */
  --shell: 1200px;
  --gutter: 40px;
  --gutter-sm: 20px;
  --section-y: 96px;
  --section-y-sm: 64px;
  --header-h: 76px;
  --header-h-scrolled: 62px;

  /* ---- Radius ---------------------------------------------------------- */
  --r-card: 10px;
  --r-btn: 6px;
  --r-plate: 14px;
  --r-cell: 2px;   /* zone lamps are square-cut, like real annunciator LEDs */

  /* ---- Shadow ---------------------------------------------------------- */
  --shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.05), 0 4px 12px rgb(var(--ink-rgb) / 0.06);
  --shadow-lift: 0 2px 4px rgb(var(--ink-rgb) / 0.07), 0 12px 28px rgb(var(--ink-rgb) / 0.11);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 180ms;
}

@media (max-width: 900px) {
  :root {
    --gutter: var(--gutter-sm);
    --section-y: var(--section-y-sm);
  }
}