/* ============================================================
   Vidzero concept v3. Design tokens (the production)
   Light warm paper. Dark indigo monitor screens. Indigo ink. Periwinkle = REC / marker.
   Named to port onto WordPress theme.json.
   ============================================================ */
:root {
  /* --- Surfaces (light paper + studio) --- */
  --paper:   #ECE6D7;   /* production paper, warm */
  --paper-rgb: 236 230 215;  /* same colour, for rgb(... / a) where the ground fades */
  --paper-2: #E3DCC8;   /* deeper paper / cards */
  --set:     #E7E0CE;   /* studio set backdrop */
  --desk:    #DED0B4;   /* desk surface behind paper */
  --label:   #F8F5EC;   /* call sheet / slate white */

  /* --- Screens + device (dark) --- */
  --screen:    #0C0830;  /* monitor screen, near-black indigo */
  --screen-2:  #161152;
  --bezel:     #16161B;  /* monitor body, neutral dark */
  --bezel-hi:  #2A2A31;

  /* --- Ink + accent --- */
  --ink:      #1A1442;   /* indigo ink on paper, AA */
  --ink-soft: #4B4576;
  --ink-faint:rgba(26,20,66,0.55);
  --on-dark:  #EFEAFA;   /* text on screens */
  --on-dark-soft: #B7B2D8;
  --accent:     #5271FF; /* periwinkle */
  --accent-ink: #3146C6; /* periwinkle for text on paper (AA) */
  /* Same accent, lifted for SMALL TEXT on a screen. #5271FF measures 4.13 on
     the near-black indigo, which clears 3:1 as a graphical object (the dots,
     the REC dot) but not 4.5:1 as type. Measured 7.08. */
  --accent-on-dark: #8FA3FF;
  --rec:        #5271FF; /* REC indicator */

  /* --- Marks --- */
  --rule:    rgba(26,20,66,0.12);
  --tape:    rgba(220,205,160,0.65);
  --tape-edge: rgba(180,162,110,0.5);
  --shadow:  rgba(46,36,12,0.22);
  --shadow-deep: rgba(28,20,6,0.40);
  --screen-glow: rgba(82,113,255,0.30);

  /* --- Type --- */
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body:    "Archivo", system-ui, sans-serif;
  --f-mono:    "Space Mono", ui-monospace, "Courier New", monospace;
  --f-hand:    "Caveat", cursive;

  /* Type revision of 30 July 2026, applied to work built from here on.
     --f-prose is the editorial second voice the page was missing; --f-machine is
     for timecode and frame counts ONLY, never for labels.
     --f-body and --f-mono are deliberately left pointing at the old faces because
     the APPROVED hero and nav use them (the hero subheading is --f-body, the HUD is
     --f-mono). Repointing them here would silently restyle approved work. The
     reconciliation is Nick's call and is logged in concept-brief.md. */
  /* Chosen 6 Aug 2026 over three serif options. The serif was the wrong reach:
     Adrian reads warm, direct and contemporary, and an editorial serif pulled
     the page literary, which fights how he actually talks. A humanist grotesque
     also sits better with the corporate half of the audience. */
  --f-prose:   "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --f-machine: "Azeret Mono", ui-monospace, "Courier New", monospace;

  --t-mega:  clamp(3.4rem, 9vw, 8rem);
  --t-h1:    clamp(2.6rem, 6vw, 5.4rem);
  --t-h2:    clamp(1.9rem, 3.6vw, 3.2rem);
  --t-h3:    clamp(1.35rem, 2vw, 1.85rem);
  --t-lead:  clamp(1.18rem, 1.7vw, 1.5rem);
  --t-body:  clamp(1rem, 1.05vw, 1.12rem);
  --t-mono:  0.78rem;
  --t-slate: 0.95rem;

  --lh-tight: 0.98;
  --lh-snug:  1.08;
  --lh-body:  1.6;
  --track-mono: 0.18em;

  /* --- Space --- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --pad-section: clamp(5rem, 10vw, 9rem);
  --container: 1440px;
  --container-pad: clamp(1.25rem, 5vw, 5rem);

  /* --- Radius --- */
  --r-xs:2px; --r-sm:4px; --r-md:10px; --r-lg:16px; --r-pill:999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-inout: cubic-bezier(0.65,0,0.35,1);
  --dur-1:.25s; --dur-2:.5s; --dur-3:.8s;

  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
  --z-grain:60; --z-nav:40; --z-lightbox:70;
}