/* ===========================================================================
   DEKS UK — design tokens
   Carried over verbatim from the signed-off DEKS North America artifact so the
   two sites read as one group. Colour role allocation is fixed by the client.
   Switch modes by swapping which block is active at the bottom of this file.
   =========================================================================== */

:root {
  /* --- Brand colour -------------------------------------------------- */
  --c-red:          #D81C16;  /* CTA fills, active states                 */
  --c-red-hover:    #B81813;  /* hover/active — darkens, never lightens   */
  --c-navy:         #1B2832;  /* dark sections, headings, footer          */
  --c-navy-raised:  #22323E;  /* panels sitting on navy                   */
  --c-navy-deep:    #0F1922;  /* base shadow under the cone               */
  --c-navy-step:    #33475A;  /* inactive-but-passed cone steps           */
  --c-blue:         #205A6F;  /* secondary surfaces, links                */
  --c-blue-hover:   #173F4D;
  --c-gold:         #E8C028;  /* accent — flat, never a gradient          */
  --c-ink:          #3A4550;  /* body copy on light grounds               */
  --c-muted:        #5A6672;  /* secondary text, captions                 */
  --c-border:       #8A93A0;  /* form outlines, functional borders        */
  --c-rule:         #DDE1E6;  /* decorative separators only               */
  --c-error:        #8E1F1B;  /* never alone — always icon + text         */
  --c-surface:      #F4F5F7;  /* light panel ground                       */
  --c-surface-2:    #E9ECEF;  /* image placeholder ground                 */
  --c-on-dark:      #C7CDD4;  /* body copy on navy                        */
  --c-white:        #FFFFFF;

  /* --- Five hard colour rules (from contrast testing, not preference) --
     1. Gold never touches white — 1.75:1. Gold lives on navy (8.60:1).
     2. Gold on navy is the strongest pairing available. Use it deliberately.
     3. Red buttons must not sit on navy — 2.93:1. On navy use a gold button
        with navy text instead.
     4. The two blues never meet — #205A6F on #1B2832 is 1.97:1.
     5. Focus rings are two-tone — navy ring, white offset; inverted on dark. */

  /* --- Type ----------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display:  clamp(38px, 5.6vw, 70px);   /* home h1                     */
  --t-h1:       clamp(34px, 4.8vw, 58px);
  --t-h1-light: clamp(30px, 3.8vw, 44px);   /* h1 on light grounds         */
  --t-h2:       clamp(30px, 4vw, 42px);
  --t-h2-sm:    clamp(26px, 3.4vw, 38px);
  --t-h3:       clamp(22px, 2.4vw, 28px);
  --t-lead:     clamp(16px, 1.5vw, 19px);
  --t-body:     16px;
  --t-small:    14px;
  --t-micro:    12px;

  /* --- Spacing / layout ------------------------------------------------ */
  --gutter:     clamp(18px, 4vw, 48px);     /* page side padding           */
  --sec-y:      clamp(32px, 5vw, 64px);     /* standard section rhythm     */
  --sec-y-lg:   clamp(40px, 7vw, 96px);     /* brand-moment sections       */
  --max:        1440px;
  --max-text:   680px;

  --radius:     0;                           /* square. everywhere.        */
  --rule-w:     1px;
  --border-w:   2px;

  --tap:        44px;                        /* minimum tap target         */
  --ctl-sm:     44px;
  --ctl:        52px;
  --ctl-lg:     56px;
}

/* ---------------------------------------------------------------------------
   Greyscale wireframe mode — add data-mode="wireframe" to <html> to hold a
   review to structure instead of styling. Not the default: DEKS has an
   established identity and a first review that looks real lands better.
   Note this swaps colour and type only. The brand furniture (real logo,
   photography slots, the 1947 band) stays — a token swap alone never makes a
   wireframe look branded, and never makes a branded page look like a wireframe.
   --------------------------------------------------------------------------- */
html[data-mode="wireframe"] {
  --c-red:         #4A4A4A;
  --c-red-hover:   #2B2B2B;
  --c-navy:        #3C3C3C;
  --c-navy-raised: #4A4A4A;
  --c-navy-deep:   #2B2B2B;
  --c-navy-step:   #5E5E5E;
  --c-blue:        #4A4A4A;
  --c-blue-hover:  #2B2B2B;
  --c-gold:        #BFBFBF;
  --c-ink:         #3C3C3C;
  --c-muted:       #6E6E6E;
  --c-border:      #9A9A9A;
  --c-rule:        #DCDCDC;
  --c-surface:     #F4F4F4;
  --c-surface-2:   #E8E8E8;
  --c-on-dark:     #D4D4D4;
}