/* ==========================================================================
   PRIZMEK — Design System / Direction C "Split"
   --------------------------------------------------------------------------
   Core idea: a prism takes one beam in and sends many out. The existing
   Prizmek mark is the beam source. Every service is one band of the spectrum
   it separates into.

   THE ONE RULE, and it is the whole direction:
     The spectrum is a STRUCTURAL device, never a decorative one.
       ✓ a hairline rule, a section marker, a 2px edge on a card
       ✗ never fills a button
       ✗ never colours body or heading text
       ✗ never becomes a background or a large surface
     A spectrum handled loosely is indistinguishable from the generic
     AI-gradient look this redesign exists to escape. Discipline is the design.

   Committed dark. This is a deliberate single-world direction, not a missing
   light mode — the spectrum only reads as refracted light against a dark ground.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- GROUND
     Cool-neutral, slight blue-violet bias so the spectrum sits in the same
     family as the ground rather than floating on top of it.
     Not pure black — pure black kills the sense of light passing through. */
  --ground:        #12131A;
  --ground-sunken: #0D0E13;
  --surface:       #1A1B24;
  --surface-raised:#22232E;

  /* ------------------------------------------------------------------- INK */
  --ink:    #EDEDF2;   /* headings, primary text            — 15.9:1 on ground */
  --ink-2:  #9A9BB0;   /* body prose, descriptions           — 6.8:1 on ground */
  /* Was #6B6C7E at 3.59:1, which failed WCAG AA and was the single item
     holding the Lighthouse accessibility score at 95. It is used for real
     text — eyebrows, meta lines, captions, form hints — so it has to clear
     4.5:1. Now 5.6:1 on the ground and 5.2:1 on raised surfaces. */
  --ink-3:  #8A8C9F;   /* labels, meta, captions             — 5.6:1 on ground */
  --ink-on-light: #12131A;

  /* ----------------------------------------------------------------- RULES */
  --rule:        rgba(255, 255, 255, 0.09);
  --rule-strong: rgba(255, 255, 255, 0.17);

  /* -------------------------------------------------------- SPECTRUM BANDS
     One band per service. Ordered as true dispersion: indigo → crimson.
     --band-web is pulled to the cyan already in the Prizmek mark, so the
     logo reads as the source of the beam rather than a sixth colour.
     Saturation held moderate — these are structural accents, not neon. */
  --band-it:     #4C5FD0;   /* Managed IT & Support   */
  --band-web:    #35C9F0;   /* Web Design & Hosting   — flagship, logo cyan */
  --band-net:    #2FA37E;   /* Networking & Cabling   */
  --band-av:     #C99A2E;   /* Audio / Visual         */
  --band-arcade: #C2506B;   /* Arcade & Entertainment */

  /* Lifted cores. A refracted band reads brighter at its centre than its
     edge; these are the inner stop of each ray gradient in the hero light. */
  --band-it-bright:     #A8B4FF;
  --band-web-bright:    #8FE6FF;
  --band-net-bright:    #7BE0BC;
  --band-av-bright:     #F2D48A;
  --band-arcade-bright: #F09BB0;

  /* The beam itself. Used at 2–3px. Never larger. */
  --beam: linear-gradient(90deg,
    var(--band-it)     0%,
    var(--band-web)   26%,
    var(--band-net)   50%,
    var(--band-av)    74%,
    var(--band-arcade) 100%);

  --beam-v: linear-gradient(180deg,
    var(--band-it)     0%,
    var(--band-web)   26%,
    var(--band-net)   50%,
    var(--band-av)    74%,
    var(--band-arcade) 100%);

  /* Page-level accent = the flagship band. Buttons, links, focus rings.
     Solid colour only — the gradient never does this job. */
  --accent:      var(--band-web);
  --accent-ink:  #0A1116;              /* text on a filled accent surface */
  --accent-soft: rgba(53, 201, 240, 0.12);
  /* Lifted tint of the accent, used only at the point of incidence in the
     hero light — the core of a refracted band reads brighter than its edge. */
  --accent-bright: #8FE6FF;

  /* --------------------------------------------------------- SEMANTIC
     Separate from the band system on purpose. State is not brand. */
  --ok:   #4FB286;
  --warn: #D9A441;
  --bad:  #D9645F;

  /* ------------------------------------------------------------- TYPE
     Archivo — variable grotesk with a real width axis. Headlines run
     expanded (wdth 112) with Light 300 and ExtraBold 800 colliding in the
     same line: the typographic echo of a beam splitting.
     JetBrains Mono carries labels, metrics and wayfinding.
     Deliberately not Inter or Space Grotesk. */
  --f-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --f-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-hero:  clamp(2.6rem, 7.2vw, 5.4rem);
  --t-h1:    clamp(2.1rem, 5vw, 3.6rem);
  --t-h2:    clamp(1.55rem, 3.4vw, 2.35rem);
  --t-h3:    clamp(1.15rem, 1.8vw, 1.35rem);
  --t-lede:  clamp(1.05rem, 1.5vw, 1.28rem);
  --t-body:  1rem;
  --t-sm:    0.9rem;
  --t-xs:    0.79rem;
  --t-label: 0.7rem;

  --lh-tight: 1.02;
  --lh-head:  1.14;
  --lh-body:  1.62;

  --tr-hero:  -0.035em;   /* negative tracking scales with size */
  --tr-head:  -0.022em;
  --tr-body:   0;
  --tr-label:  0.14em;    /* positive on small uppercase */

  /* ------------------------------------------------------------ SPACE
     8px base. Marketing page → generous end of the scale. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --section-y: clamp(var(--s-8), 11vw, var(--s-10));

  /* ----------------------------------------------------------- LAYOUT */
  --container: 1200px;
  --container-narrow: 880px;
  --measure: 66ch;
  --gutter: clamp(20px, 5vw, 48px);

  /* Sharp. Direction C has no soft corners — refraction is about edges.
     --r-2 exists only for chips and tiny inline surfaces. */
  --r-0: 0;
  --r-2: 2px;

  /* ----------------------------------------------------------- MOTION */
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 420ms;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-firm: cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------ DEPTH
     Shadows carry the ground's hue, never neutral black. */
  --shadow-1: 0 1px 2px rgba(6, 7, 12, 0.5);
  --shadow-2: 0 4px 16px rgba(6, 7, 12, 0.55);
  --shadow-3: 0 18px 48px rgba(6, 7, 12, 0.62);

  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
}

/* Per-service theming. Set data-band on any section or card and its
   structural accents inherit that service's colour automatically. */
[data-band="it"]     { --accent: var(--band-it);     --accent-ink: #EDEDF2; --accent-soft: rgba(76, 95, 208, 0.14);  --accent-bright: #A8B4FF; }
[data-band="web"]    { --accent: var(--band-web);    --accent-ink: #0A1116; --accent-soft: rgba(53, 201, 240, 0.12); --accent-bright: #8FE6FF; }
[data-band="net"]    { --accent: var(--band-net);    --accent-ink: #06140F; --accent-soft: rgba(47, 163, 126, 0.14); --accent-bright: #7BE0BC; }
[data-band="av"]     { --accent: var(--band-av);     --accent-ink: #14100A; --accent-soft: rgba(201, 154, 46, 0.14); --accent-bright: #F2D48A; }
[data-band="arcade"] { --accent: var(--band-arcade); --accent-ink: #EDEDF2; --accent-soft: rgba(194, 80, 107, 0.14); --accent-bright: #F09BB0; }