/* ArcComplete design tokens — vision §23–§27, §30, §36, §45.
   Six product accents (one family: similar lightness and chroma), a blue-black ground
   instead of flat black, and light that behaves like light. */

:root {
  /* ground */
  --void: #07080C;
  --bg: #0A0C12;
  --graphite: #10131B;
  --graphite-deep: #0E1220;
  --indigo-deep: #0B0F1F;
  --elevated: #171B25;
  --elevated-2: #1F2430;
  --fg: #F5F4EF;
  --fg-2: #B0B4BE;
  --fg-3: #7E838E;   /* 5.0:1 on --bg — the floor for small uppercase labels */
  --fg-4: #545963;   /* decoration only: hairlines, dots, the giant numerals — never running text */
  --white: #FFFFFF;
  --line: rgba(245, 244, 239, 0.08);
  --line-strong: rgba(245, 244, 239, 0.16);

  --warm: #F4F2EC;
  --warm-2: #ECE9E1;
  --warm-fg: #0B0C0F;
  --warm-fg-2: #4E525A;
  --warm-fg-3: #6B6F78; /* 4.5:1 on --warm */
  --warm-line: rgba(11, 12, 15, 0.10);
  --warm-line-strong: rgba(11, 12, 15, 0.22);

  /* product family — Body owns the company blue (sampled from the logo) */
  --c-body: #0074FC;   --c-body-soft: rgba(0, 116, 252, 0.14);   --c-body-glow: rgba(0, 116, 252, 0.32);
  --c-focus: #7B61FF;  --c-focus-soft: rgba(123, 97, 255, 0.14); --c-focus-glow: rgba(123, 97, 255, 0.32);
  --c-learn: #17B8D8;  --c-learn-soft: rgba(23, 184, 216, 0.14); --c-learn-glow: rgba(23, 184, 216, 0.32);
  --c-life: #3DBB78;   --c-life-soft: rgba(61, 187, 120, 0.14);  --c-life-glow: rgba(61, 187, 120, 0.32);
  --c-social: #FF6F61; --c-social-soft: rgba(255, 111, 97, 0.14); --c-social-glow: rgba(255, 111, 97, 0.32);
  --c-money: #12A67A;  --c-money-soft: rgba(18, 166, 122, 0.14); --c-money-glow: rgba(18, 166, 122, 0.32);

  --arc: var(--c-body);
  --arc-bright: #3D8FFF;
  --arc-core: #E9F1FF;
  --arc-soft: var(--c-body-soft);
  --arc-faint: rgba(0, 116, 252, 0.06);
  --violet: var(--c-focus);

  /* the current accent (defaults to the company blue; [data-accent] overrides for a subtree) */
  --accent: var(--c-body);
  --accent-soft: var(--c-body-soft);
  --accent-glow: var(--c-body-glow);

  /* section theme (dark default) */
  --s-bg: var(--bg);
  --s-fg: var(--fg);
  --s-fg-2: var(--fg-2);
  --s-fg-3: var(--fg-3);
  --s-line: var(--line);
  --s-line-strong: var(--line-strong);
  --s-surface: var(--graphite);
  --s-surface-2: var(--elevated);

  /* type */
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --t-hero: clamp(48px, 6.6vw, 100px);
  --t-editorial: clamp(40px, 5.4vw, 84px);
  --t-statement: clamp(34px, 4.4vw, 66px);
  --t-section: clamp(32px, 3.6vw, 56px);
  --t-title: clamp(24px, 2.2vw, 32px);
  --t-lead: clamp(18px, 1.35vw, 20px);
  --t-body: 17px;
  --t-small: 15px;
  --t-label: 13px;
  /* tracking tightens with size: display type at 100px+ wants -0.05em, the same face at 40px wants -0.03em */
  --track-display: -0.05em;
  --track-tight: -0.03em;
  --track-word: -0.055em;
  --track-label: 0.08em;

  /* layout */
  --container: 1440px;
  --content: 1200px;
  --measure: 42rem;
  --measure-wide: 56rem;
  --gutter: clamp(20px, 4.4vw, 64px);
  --section-y: clamp(88px, 9.5vw, 150px);
  --section-y-sm: clamp(64px, 7vw, 112px);

  /* shape — one radius scale (8 / 12 / 16 / 20 / 28) plus the device */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-device: 44px;
  --r-device-sm: 36px;
  --r-card: var(--r-lg);
  --r-btn: var(--r-sm);
  --r-nav: var(--r-md);
  --r-pill: 999px;
  --hairline: 1px;

  /* motion — micro 120–220ms, interface 250–450ms, narrative 700–1400ms */
  --micro: 160ms;
  --interface: 360ms;
  --narrative: 1000ms;
  --ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.3, 0.9, 0.3, 1);

  /* shadow scale — 1 resting, 2 lifted, 3 floating. Each pairs a tight contact shadow with a wide ambient one. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 6px rgba(0, 0, 0, 0.28), 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 12px rgba(0, 0, 0, 0.28), 0 30px 80px rgba(0, 0, 0, 0.5);
  --shadow-soft: var(--shadow-1);
  --shadow-card: var(--shadow-2);
}

/* accent scoping: any subtree can take a product's colour */
[data-accent="body"]   { --accent: var(--c-body);   --accent-soft: var(--c-body-soft);   --accent-glow: var(--c-body-glow); }
[data-accent="focus"]  { --accent: var(--c-focus);  --accent-soft: var(--c-focus-soft);  --accent-glow: var(--c-focus-glow); }
[data-accent="learn"]  { --accent: var(--c-learn);  --accent-soft: var(--c-learn-soft);  --accent-glow: var(--c-learn-glow); }
[data-accent="life"]   { --accent: var(--c-life);   --accent-soft: var(--c-life-soft);   --accent-glow: var(--c-life-glow); }
[data-accent="social"] { --accent: var(--c-social); --accent-soft: var(--c-social-soft); --accent-glow: var(--c-social-glow); }
[data-accent="money"]  { --accent: var(--c-money);  --accent-soft: var(--c-money-soft);  --accent-glow: var(--c-money-glow); }

/* section tones */
.theme-deep { --s-bg: var(--graphite-deep); --s-surface: #141827; --s-surface-2: #1B2032; }
.theme-indigo { --s-bg: var(--indigo-deep); --s-surface: #121729; --s-surface-2: #1A2036; }
.theme-warm {
  --s-bg: var(--warm);
  --s-fg: var(--warm-fg);
  --s-fg-2: var(--warm-fg-2);
  --s-fg-3: var(--warm-fg-3);
  --s-line: var(--warm-line);
  --s-line-strong: var(--warm-line-strong);
  --s-surface: #FFFFFF;
  --s-surface-2: var(--warm-2);
  color-scheme: light;
}

/* fluid tracking + a tighter mobile type scale (ideas 5, 19) */
@media (max-width: 1100px) { :root { --track-display: -0.042em; --track-word: -0.05em; } }
@media (max-width: 640px) {
  :root { --track-display: -0.032em; --track-tight: -0.022em; --track-word: -0.04em; --t-hero: 42px; --t-editorial: 36px; --t-statement: 30px; --t-section: 30px; --t-lead: 17px; }
}