/* ============================================================
   LEVELTHREE — design tokens
   Two themes (dark default / light brochure) + accent system.
   Accent is applied as a class on the theme wrapper so each
   accent ships a tuned value per theme.
   ============================================================ */

:root {
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* radii */
  --r1: 6px;
  --r2: 10px;
  --r3: 16px;
  --r4: 22px;

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .6s;
}

/* ---------------- DARK (public + gated) ---------------- */
[data-theme="dark"] {
  --bg:        #0B0C0E;
  --bg-1:      #101216;
  --bg-2:      #0e1013;
  --surface:   #14161B;
  --surface-2: #191C22;
  --line:        rgba(255,255,255,.085);
  --line-strong: rgba(255,255,255,.17);
  --fg:   #ECEBE7;
  --fg-1: #A7A9AD;
  --fg-2: #6C6F74;
  --fg-3: #4a4d52;
  --scrim: rgba(8,9,11,.72);
  --card-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -40px rgba(0,0,0,.9);
  color-scheme: dark;
}

/* ---------------- LIGHT (product brochure) ---------------- */
[data-theme="light"] {
  --bg:        #F4F2EC;
  --bg-1:      #ECE9E1;
  --bg-2:      #F8F6F1;
  --surface:   #FFFFFF;
  --surface-2: #FBF9F5;
  --line:        rgba(24,22,18,.12);
  --line-strong: rgba(24,22,18,.24);
  --fg:   #18191B;
  --fg-1: #555651;
  --fg-2: #87887F;
  --fg-3: #a9a99f;
  --scrim: rgba(244,242,236,.75);
  --card-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 50px -36px rgba(40,34,22,.28);
  color-scheme: light;
}

/* ---------------- ACCENTS ----------------
   Same low chroma, hue varies. Tuned per theme for contrast. */
.accent-brass[data-theme="dark"]  { --accent:#C7A773; --accent-2:#dcc197; --accent-fg:#0B0C0E; }
.accent-brass[data-theme="light"] { --accent:#8A6B38; --accent-2:#6f5526; --accent-fg:#ffffff; }

.accent-steel[data-theme="dark"]  { --accent:#84A4C4; --accent-2:#a7c0d8; --accent-fg:#0B0C0E; }
.accent-steel[data-theme="light"] { --accent:#3F6485; --accent-2:#2c4a66; --accent-fg:#ffffff; }

.accent-sage[data-theme="dark"]   { --accent:#90B89B; --accent-2:#b1d0ba; --accent-fg:#0B0C0E; }
.accent-sage[data-theme="light"]  { --accent:#4E7B5C; --accent-2:#3a6147; --accent-fg:#ffffff; }

.accent-mono[data-theme="dark"]   { --accent:#CFCFCB; --accent-2:#e6e6e2; --accent-fg:#0B0C0E; }
.accent-mono[data-theme="light"]  { --accent:#33332F; --accent-2:#191916; --accent-fg:#ffffff; }

/* derived */
[data-theme] {
  --accent-soft:  color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-line:  color-mix(in oklab, var(--accent) 40%, var(--line));
  --accent-glow:  color-mix(in oklab, var(--accent) 22%, transparent);
}