/* ==========================================================================
   Colour layer — Swiss Signal
   Decided 2026-09-14. Rationale and the four rejected directions: PALETTES.md
   Every ratio below is measured, not estimated. WCAG 2.1.
   ========================================================================== */

:root {
  /* --- Surfaces -----------------------------------------------------------
     Elevation is carried by shadow and rule, never by a grey fill. The only
     filled surface is the sunken well, which exists for one reason: 53 of the
     84 case images are light and bleed into pure white without it.          */
  --surface-base:    #FFFFFF;
  --surface-sunken:  #F4F4F4;
  --surface-raised:  #FFFFFF;  /* differentiated by --shadow-raised */
  --surface-ink:     #0B0B0B;  /* inverted bands: footer, closing CTA */

  /* --- Ink ---------------------------------------------------------------- */
  --ink:             #0B0B0B;  /* 19.68 on base — body and headings */
  --ink-secondary:   #454545;  /*  9.59 on base — supporting copy */
  --ink-muted:       #6B6B6B;  /*  5.33 on base, 4.85 on sunken — labels, captions */
  --ink-faint:       #8A8A8A;  /*  3.45 — large text and disabled only, never body */
  --ink-inverse:     #FAFAFA;  /* 18.86 on surface-ink */
  --ink-inverse-muted: #A8A8A8;/*  8.28 on surface-ink */

  /* --- Rules -------------------------------------------------------------- */
  --line-faint:      #EFEFEF;  /* dividers inside a group */
  --line:            #E2E2E2;  /* default borders */
  --line-strong:     #C9C9C9;  /* image frames, table heads */
  --line-ink:        #0B0B0B;  /* a rule that carries weight, 1px max */
  --line-inverse:    #2A2A2A;  /* borders on surface-ink */

  /* --- Accent -------------------------------------------------------------
     FILL ONLY. 1.14 against white, so it can never hold text, an icon, or a
     border on its own. Ink on accent is 17.30, which is the only legal use.
     Budget: three appearances per page, maximum.                            */
  --accent:          #DCFF4F;
  --accent-pressed:  #CBF02F;
  --on-accent:       #0B0B0B;

  /* --- Action -------------------------------------------------------------
     Primary buttons are solid ink, not accent. This is what keeps the acid
     from turning into a brand colour it cannot carry.                        */
  --action:          #0B0B0B;
  --action-hover:    #262626;
  --action-pressed:  #000000;
  --on-action:       #FFFFFF;  /* 19.68 */
  --action-ghost-border: var(--line);

  /* --- Focus --------------------------------------------------------------
     Always 2px with a 2px offset. Never removed, never replaced by a shadow. */
  --focus:           #0B0B0B;
  --focus-inverse:   #FAFAFA;

  /* --- Semantic, for the contact form ------------------------------------- */
  --danger:          #B3261E;  /* 6.54 on base */
  --success:         #1B6B3A;  /* 6.54 on base */
  --danger-inverse:  #FF8A7A;  /* 8.59 on surface-ink */
  --success-inverse: #6FD199;  /* 10.55 on surface-ink */

  /* --- Elevation ----------------------------------------------------------
     Two layers, tinted with the ink rather than pure black, low opacity.
     Flat single-layer shadows are banned by AGENTS.md.                       */
  --shadow-raised:
    0 1px 2px rgba(11, 11, 11, 0.04),
    0 2px 8px rgba(11, 11, 11, 0.06);
  --shadow-floating:
    0 2px 4px rgba(11, 11, 11, 0.05),
    0 12px 32px rgba(11, 11, 11, 0.10);

  /* --- Case media ---------------------------------------------------------
     Derived from the asset audit: 53 light, 16 mid, 15 dark out of 84. No
     canvas is neutral for that spread, so every case image is framed.
     .is-light  → well plus frame, stops the bleed
     .is-dark   → frame only, it already separates itself                     */
  --media-well:      var(--surface-sunken);
  --media-frame:     1px solid var(--line-strong);
  --media-radius:    10px;
}

/* Inverted bands inherit the same names, so components need no variants. */
.on-ink {
  --surface-base:   #0B0B0B;
  --surface-sunken: #151515;
  --surface-raised: #151515;
  --ink:            #FAFAFA;
  --ink-secondary:  #C7C7C7;
  --ink-muted:      #A8A8A8;
  --ink-faint:      #6E6E6E;
  --line-faint:     #1C1C1C;
  --line:           #2A2A2A;
  --line-strong:    #3A3A3A;
  --line-ink:       #FAFAFA;
  --action:         #FAFAFA;
  --action-hover:   #E4E4E4;
  --on-action:      #0B0B0B;
  --focus:          #FAFAFA;
  --danger:         var(--danger-inverse);
  --success:        var(--success-inverse);
}

@media (prefers-contrast: more) {
  :root { --ink-muted: #565656; --line: #C9C9C9; }
}