/* base/tokens.css — global :root custom properties (+ universal reset selector, html base) — split from main.css lines 1-29. See docs/ for the reorg record. */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; border-radius:0; box-shadow:none; }
html { font-size: clamp(15px, 0.35vw + 0.75rem, 17px); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
:root {
  --color-brand-purple:  #A100FF;
  --color-purple-hover:  #8C00D9;
  --color-purple-light:  #C2A3FF;
  --color-brand-black:   #000000;
  --color-brand-white:   #FFFFFF;
  --color-text-muted:    rgba(255,255,255,0.6);
  /* 0.45 measured 4.41:1 on black — 0.09 short of AA, on 49 elements across
     all eight pages. 0.50 clears it at 5.28:1. Bundled here because G1's
     fourth condition requires BOTH themes to pass and this is the same
     token the light block re-points. */
  --color-text-dim:      rgba(255,255,255,0.50);
  --color-border-faint:  rgba(255,255,255,0.06);
  --color-border-soft:   rgba(255,255,255,0.10);
  --font-primary:        'Archivo', 'Archivo Fallback', Arial, sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700; --fw-black:900;
  --max-content-width: 1440px;
  --gutter:      clamp(1rem, 3.5vw, 5rem);
  --nav-height:  clamp(3.5rem, 4vw, 4rem);
  /* Services carousel tokens */
  --peek-width:  clamp(3rem, 8vw, 6rem);
  --slide-gap:   clamp(3rem, 4vw, 4rem);
  --col-gap:     clamp(3rem, 5vw, 5rem);
  --img-col:     51fr;
  --txt-col:     49fr;
  --ease-standard:   cubic-bezier(0.4,0.0,0.2,1);
  --ease-decelerate: cubic-bezier(0.0,0.0,0.2,1);
  --duration-ui:     250ms;
  --duration-ambient:7000ms;
  /* Decoration clock (decoration-system.spec.md §5): every one-shot runs on --duration-deco; a sequence's staggers
     add up to 700 ms at most; RUN passes an edge item to item and lets go of its last by 1.2 s. */
  --duration-deco:   500ms;
  --stagger-deco:    80ms;
  --stagger-run:     140ms;
  --hold-run:        360ms;
  /* ── Theme channels. --ink is the foreground, --ground its opposite.
     Both are bare "r,g,b" triplets so alpha literals that had no token
     (rgba(255,255,255,.12), rgba(0,0,0,.68) …) become rgba(var(--ink),.12)
     and rgba(var(--ground),.68) and flip with the theme automatically. */
  --ink:    255,255,255;
  --ground: 0,0,0;
  /* Content sitting ON a brand fill — the purple CTA squares, type on the
     About cards' red/blue/indigo. Brand fills do not lighten with the theme,
     so their content must not darken. Deliberately absent from the light
     block: this one never flips. */
  --color-on-brand: #FFFFFF;
  /* ── Elevation ladder. The seven surface greys that were literals.
     Named by role, following the reference deck's --notes-bg precedent. */
  --surface-sunken:   #050505;
  --surface-card:     #0A0A0A;
  --surface-raised:   #111111;
  --surface-input:    #161616;
  --surface-hover:    #1A1A1A;
  --surface-elevated: #1E1E1E;
  --surface-panel:    rgba(8,8,8,0.97);
  --border-hairline:  #222222;
  /* ── Drop shadows stay black in both themes; only the alpha drops,
     because a white shadow on a light ground reads as nothing. */
  --shadow-1: rgba(0,0,0,0.45);
  --shadow-2: rgba(0,0,0,0.65);
  --shadow-3: rgba(0,0,0,0.55);
  --scrim-modal: rgba(10,10,10,0.85);
}

/* ── LIGHT THEME ───────────────────────────────────────────────────────────
   Dark is the default and carries NO attribute: absent data-theme is dark,
   so a first load with no stored preference resolves dark at every
   breakpoint. Light is the opt-in, re-pointing the same six canonical
   neutrals rather than introducing a parallel set — the pattern inherited
   from JDigital_NetworkingTour_InnovaULima_1.html, whose :root this file's
   :root matches. The brand purples and the semantic red/blue/indigo are
   theme-independent and are not restated here. */
html[data-theme="light"] {
  --color-brand-black:   #FFFFFF;
  --color-brand-white:   #0A0A0A;
  --color-text-muted:    rgba(0,0,0,0.60);
  /* 0.42 mirrored the dark 0.45, but black-on-white is the dimmer pairing:
     it measured 3.04:1 against white. 0.55 restores AA at 4.76:1. */
  --color-text-dim:      rgba(0,0,0,0.55);
  /* --color-purple-light is an accent that reads on black, not on white
     (2.10:1). Light mode borrows the palette's own darker purple, 6.74:1,
     rather than introducing a hue the brand does not already own. */
  --color-purple-light:  #8C00D9;
  --color-border-faint:  rgba(0,0,0,0.06);
  --color-border-soft:   rgba(0,0,0,0.10);
  --ink:    0,0,0;
  --ground: 255,255,255;
  --surface-sunken:   #F7F7F7;
  --surface-card:     #F2F2F2;
  --surface-raised:   #EDEDED;
  --surface-input:    #E8E8E8;
  --surface-hover:    #E2E2E2;
  --surface-elevated: #E8E8E8;
  --surface-panel:    rgba(250,250,250,0.97);
  --border-hairline:  #D8D8D8;
  --shadow-1: rgba(0,0,0,0.10);
  --shadow-2: rgba(0,0,0,0.14);
  --shadow-3: rgba(0,0,0,0.16);
  --scrim-modal: rgba(20,20,20,0.55);
}

/* Themed properties ease rather than snap when the toggle fires. */
html { transition: background-color 200ms var(--ease-standard); }
/* Reduced motion: anchors jump instead of gliding, on every page (About and Contact still glided). */
@media (prefers-reduced-motion: reduce) { html { transition: none; scroll-behavior: auto; } }