/* ═══════════════════════════════════════════════════════════
   VALTRIN — DESIGN TOKENS  v0.3
   LIGHT-FIRST. The page is paper. The Valtrin dark/bronze
   treatment is reserved for specific blocks via .theme-dark,
   which makes it read as a deliberate mode rather than a wash.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Ground (light) ─────────────────────────────────── */
  --vt-paper:         #FBFAF7;   /* page ground — warm white  */
  --vt-ground:        #F4F2ED;   /* recessed band             */
  --vt-panel:         #FFFFFF;   /* raised surface            */
  --vt-panel-alt:     #F0EEE8;   /* nested surface            */

  /* ── Structure ──────────────────────────────────────── */
  --vt-line:          #DEDAD2;
  --vt-line-strong:   #BEB8AD;

  /* ── Type ───────────────────────────────────────────── */
  --vt-ink-max:       #16171A;
  --vt-ink-bright:    #26282C;
  --vt-ink:           #43464C;
  --vt-ink-muted:     #63666D;
  --vt-ink-faint:     #666A72;   /* audited: 4.85:1 on --vt-ground @11px */

  /* ── Bronze ─────────────────────────────────────────────
     Two values. The logo bronze (#C08343) is beautiful on
     dark and fails contrast as small text on paper — so a
     darkened variant carries text, the logo value carries
     marks, borders and large forms.                        */
  --vt-bronze:        #8F5A1C;   /* text-safe: 5.15:1 on ground */
  --vt-bronze-bright: #C08343;   /* the logo value            */
  --vt-bronze-dim:    #E3D6C2;   /* faint rule on paper       */

  /* ── Semantic ───────────────────────────────────────── */
  --vt-validated:     #4E6B2E;
  --vt-flag:          #A8492A;

  /* ── Type families ──────────────────────────────────── */
  --vt-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vt-font-serif:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* serif retired — Calvin: follow Tesla font */
  --vt-font-mono:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Type scale ─────────────────────────────────────── */
  --vt-t-display:  clamp(2.75rem, 7vw, 6rem);
  --vt-t-h1:       clamp(2rem, 4vw, 3.25rem);
  --vt-t-h2:       clamp(1.5rem, 2.6vw, 2rem);
  --vt-t-h3:       1.25rem;
  --vt-t-body-lg:  1.0625rem;
  --vt-t-body:     0.9375rem;
  --vt-t-small:    0.8125rem;
  --vt-t-micro:    0.6875rem;

  /* ── Spacing — base 4 ───────────────────────────────── */
  --vt-s-1:4px;   --vt-s-2:8px;   --vt-s-3:12px;  --vt-s-4:16px;
  --vt-s-5:24px;  --vt-s-6:32px;  --vt-s-7:48px;  --vt-s-8:64px;
  --vt-s-9:96px;  --vt-s-10:128px;--vt-s-11:192px;--vt-s-12:256px;

  /* ── Brand diagonal — from the V flank, ~53° ────────── */
  --vt-angle:     53deg;
  --vt-angle-tan: 1.327;

  /* ── Grid ───────────────────────────────────────────── */
  --vt-grid-max:    1440px;
  --vt-grid-margin: var(--vt-s-8);
  --vt-grid-gutter: var(--vt-s-5);
  --vt-grid-cols:   12;

  /* ── Border — logo corners are mitred, radius stays 0 ─ */
  --vt-border-hair:   1px solid var(--vt-line);
  --vt-border:        1px solid var(--vt-line);
  --vt-border-strong: 1px solid var(--vt-line-strong);
  --vt-border-active: 1px solid var(--vt-bronze);
  --vt-radius-none: 0;
  --vt-radius-sm:   0;

  /* ── Motion ─────────────────────────────────────────── */
  --vt-d-instant:     80ms;
  --vt-d-quick:      160ms;
  --vt-d-base:       240ms;
  --vt-d-considered: 400ms;
  --vt-d-deliberate: 640ms;

  /* Built-in easings are too weak — they lack the punch that reads as
     intentional. These are the stronger custom variants.
     ⚠️ Never ease-in on UI: it delays the first movement, which is the
     exact moment the user is watching most closely. */
  --vt-e-mechanical: cubic-bezier(0.23, 1, 0.32, 1);    /* strong ease-out  */
  --vt-e-settle:     cubic-bezier(0.16, 1, 0.3, 1);     /* values landing   */
  --vt-e-precise:    cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen moves  */
  --vt-e-draw:       cubic-bezier(0.32, 0.72, 0, 1);    /* stroke / drawer  */
}

/* ═══════════════════════════════════════════════════════════
   THEME-DARK — the Valtrin treatment.
   Applied to specific blocks only: the hero (over film) and
   the signature sequence. Same token names, so every
   component inherits without knowing which mode it is in.
   ═══════════════════════════════════════════════════════════ */
.theme-dark{
  --vt-paper:         #0C1424;
  --vt-ground:        #111B30;
  --vt-panel:         #16223D;
  --vt-panel-alt:     #1B2A4A;

  --vt-line:          #263553;
  --vt-line-strong:   #3A4C6E;

  --vt-ink-max:       #F2F4F6;
  --vt-ink-bright:    #DCE0E5;
  --vt-ink:           #B4BAC2;
  --vt-ink-muted:     #9CA3AC;
  --vt-ink-faint:     #868E97;

  --vt-bronze:        #C08343;   /* logo value works on dark  */
  --vt-bronze-bright: #D9A468;
  --vt-bronze-dim:    #6E4F2C;

  --vt-validated:     #8FAE66;
  --vt-flag:          #C97B5C;

  --vt-border-hair:   0.5px solid var(--vt-line);

  background:var(--vt-paper);
  color:var(--vt-ink);
}

@media (max-width:1279px){ :root{ --vt-grid-margin:var(--vt-s-7); --vt-grid-gutter:20px; } }
@media (max-width:1023px){ :root{ --vt-grid-margin:var(--vt-s-6); --vt-grid-cols:8; } }
@media (max-width:767px) { :root{ --vt-grid-margin:20px; --vt-grid-gutter:var(--vt-s-4); --vt-grid-cols:4; } }