/* StepsReel + VeeDocs design tokens.
   One shared structure; each brand sets its own values.
   Use: <html data-brand="stepsreel"> or <html data-brand="veedocs">.
   Optional: data-theme="light" | "dark" on <html>; with none, the OS setting decides. */

:root {
  /* spacing (4 px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px;

  /* type scale (px) */
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px;
  --text-xl: 21px; --text-2xl: 26px; --text-3xl: 32px; --text-4xl: 42px;
  --text-5xl: 56px; --text-6xl: 72px;
  --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.6;
  --measure: 68ch;

  /* borders, focus, layout */
  --border-width: 1px;
  --border-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --container: 1080px;

  /* motion */
  --dur-fast: 120ms;   /* hover, press */
  --dur-base: 200ms;   /* menus, toggles, tabs */
  --dur-slow: 320ms;   /* section reveal, diagram lines */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --reveal-distance: 8px;

  /* shared mono */
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius-pill: 999px;
  --disabled-opacity: .45;
}

/* ---------- StepsReel: clear, polished, approachable ---------- */
[data-brand="stepsreel"] {
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-display: 700; --weight-strong: 600;
  --tracking-display: -0.012em;

  --radius-control: 10px; --radius-card: 16px; --radius-media: 12px; --radius-code: 8px;
  --shadow-card: 0 1px 2px rgba(18, 22, 29, .06), 0 8px 24px rgba(18, 22, 29, .06);
  --shadow-media: 0 12px 32px rgba(18, 22, 29, .12);

  --color-bg: #F7F8FA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #12161D;
  --color-text-muted: #5A6371;
  --color-border: #E1E4E9;
  --color-accent: #F5B700;          /* marigold: primary buttons, step badges, highlights. Never as text on light. */
  --color-accent-hover: #E0A600;
  --color-accent-pressed: #C99600;
  --color-on-accent: #12161D;       /* text on marigold is always ink */
  --color-accent-soft: #FFF4CC;
  --color-secondary: #12161D;       /* ink buttons */
  --color-on-secondary: #FFFFFF;
  --color-focus: #12161D;           /* marigold fails 3:1 on white, so focus is ink in light mode */
  --color-success: #1F7A3D; --color-warning: #A15C00; --color-danger: #C0362C; --color-info: #2B5CB8;
  --color-code-bg: #12161D; --color-code-text: #EDF0F4; --color-code-muted: #9AA3B0;
  --color-highlight: rgba(245, 183, 0, .28);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  [data-brand="stepsreel"]:not([data-theme="light"]) {
    --color-bg: #0F1217; --color-surface: #171B22; --color-surface-raised: #1E232B;
    --color-text: #EDF0F4; --color-text-muted: #9AA3B0; --color-border: #2A3039;
    --color-accent: #F5B700; --color-accent-hover: #FFC52E; --color-accent-pressed: #E0A600;
    --color-on-accent: #12161D; --color-accent-soft: #3A3110;
    --color-secondary: #EDF0F4; --color-on-secondary: #12161D; --color-focus: #F5B700;
    --color-success: #4CC27A; --color-warning: #F0A640; --color-danger: #F2766B; --color-info: #7FA6F5;
    --color-code-bg: #0B0D11; --color-highlight: rgba(245, 183, 0, .22);
    --shadow-card: none; --shadow-media: 0 12px 32px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
[data-brand="stepsreel"][data-theme="dark"] {
  --color-bg: #0F1217; --color-surface: #171B22; --color-surface-raised: #1E232B;
  --color-text: #EDF0F4; --color-text-muted: #9AA3B0; --color-border: #2A3039;
  --color-accent: #F5B700; --color-accent-hover: #FFC52E; --color-accent-pressed: #E0A600;
  --color-on-accent: #12161D; --color-accent-soft: #3A3110;
  --color-secondary: #EDF0F4; --color-on-secondary: #12161D; --color-focus: #F5B700;
  --color-success: #4CC27A; --color-warning: #F0A640; --color-danger: #F2766B; --color-info: #7FA6F5;
  --color-code-bg: #0B0D11; --color-highlight: rgba(245, 183, 0, .22);
  --shadow-card: none; --shadow-media: 0 12px 32px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ---------- VeeDocs: precise, calm, technically credible ---------- */
[data-brand="veedocs"] {
  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-display: 600; --weight-strong: 600;
  --tracking-display: -0.01em;

  --radius-control: 6px; --radius-card: 10px; --radius-media: 8px; --radius-code: 6px;
  --shadow-card: none;              /* VeeDocs separates with borders, not shadows */
  --shadow-media: 0 8px 24px rgba(15, 20, 26, .10);

  --color-bg: #F6F7F9;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #0F141A;
  --color-text-muted: #5B6472;
  --color-border: #DFE3E8;
  --color-accent: #4053D6;          /* indigo: links, primary buttons, the path being taught */
  --color-accent-hover: #3445C2;
  --color-accent-pressed: #2A389F;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #EEF0FD;
  --color-secondary: #0F141A;
  --color-on-secondary: #FFFFFF;
  --color-focus: #4053D6;
  --color-success: #1A7F5A;         /* "verified result" green, also in diagrams */
  --color-warning: #9A6700; --color-danger: #B42318; --color-info: #4053D6;
  --color-code-bg: #0F141A; --color-code-text: #E6EAF0; --color-code-muted: #8B95A3;
  --color-highlight: rgba(140, 155, 255, .16);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  [data-brand="veedocs"]:not([data-theme="light"]) {
    --color-bg: #0B0F14; --color-surface: #121820; --color-surface-raised: #18202A;
    --color-text: #E6EAF0; --color-text-muted: #8B95A3; --color-border: #253041;
    --color-accent: #8C9BFF; --color-accent-hover: #A3B0FF; --color-accent-pressed: #7383F5;
    --color-on-accent: #0F141A; --color-accent-soft: #1C2347;
    --color-secondary: #E6EAF0; --color-on-secondary: #0F141A; --color-focus: #8C9BFF;
    --color-success: #4CC38A; --color-warning: #E3B341; --color-danger: #F97066; --color-info: #8C9BFF;
    --color-code-bg: #070A0E; --color-highlight: rgba(140, 155, 255, .14);
    --shadow-media: 0 8px 24px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
[data-brand="veedocs"][data-theme="dark"] {
  --color-bg: #0B0F14; --color-surface: #121820; --color-surface-raised: #18202A;
  --color-text: #E6EAF0; --color-text-muted: #8B95A3; --color-border: #253041;
  --color-accent: #8C9BFF; --color-accent-hover: #A3B0FF; --color-accent-pressed: #7383F5;
  --color-on-accent: #0F141A; --color-accent-soft: #1C2347;
  --color-secondary: #E6EAF0; --color-on-secondary: #0F141A; --color-focus: #8C9BFF;
  --color-success: #4CC38A; --color-warning: #E3B341; --color-danger: #F97066; --color-info: #8C9BFF;
  --color-code-bg: #070A0E; --color-highlight: rgba(140, 155, 255, .14);
  --shadow-media: 0 8px 24px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---------- shared components (built only from tokens) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: var(--weight-strong) var(--text-md)/1 var(--font-body);
  padding: 14px 20px; border-radius: var(--radius-control);
  border: var(--border-strong) solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-pressed); transform: translateY(1px); }
.btn-secondary { background: var(--color-secondary); color: var(--color-on-secondary); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-text-muted); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; transform: none; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.input {
  font: var(--text-md)/1.4 var(--font-body); color: var(--color-text); background: var(--color-surface);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); padding: 12px 14px;
}
.input:hover { border-color: var(--color-text-muted); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.card { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-6); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--text-sm)/1 var(--font-body); padding: 7px 12px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.code { font: 400 var(--text-sm)/1.7 var(--font-mono); background: var(--color-code-bg); color: var(--color-code-text); border-radius: var(--radius-code); padding: var(--space-4) var(--space-5); overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }