/* Design tokens for the full-visual-replacement route (see README).

   Two layers, two namespaces:
   1. --brand-*: a FIXED namespace, same names on every project,
      only the values change. Colors are --brand-color-* with a small,
      ROLE-named palette: primary,
      secondary, accent, contrast, dark, light. Role names, not
      appearance names — "dark" can become a tinted navy instead of
      pure black without the name becoming a lie (the trap with names
      like "steel" or "ink", which describe a look, not a role).
      A theme doesn't need its own prefix to use these — reference
      var(--brand-color-primary) directly, or with a hardcoded
      fallback (var(--brand-color-primary, #1b1bff)) if a component
      needs to work even where brand tokens aren't defined.
   2. --theme-color-* — the semantic layer. Maps UI concerns (background,
      text, border, ...) onto the brand roles above. Components should
      read this layer, not brand tokens directly, so a dark theme (or
      any re-theme) only means repointing semantic tokens — no
      component CSS changes. */

:root {
  /* Brand palette — fixed names, replace the values with your
     project's actual palette. Only genuinely-branded colors go here;
     plain grays don't need a role name beyond dark/light. */
  --brand-color-primary: #264a3d;
  --brand-color-secondary: #94c5b3;
  --brand-color-accent: #d9806a;
  --brand-color-tertiary: #c2a04e;
  --brand-color-contrast: #1d1b1b;
  --brand-color-dark: #1d1b1b;
  --brand-color-light: #f7f6f3;

  /* Semantic tokens — components read these, not --brand-color-* directly */
  --theme-color-background: var(--brand-color-dark);
  --theme-color-surface: #fff;
  --theme-color-border: color-mix(in srgb, var(--brand-color-dark) 20%, var(--brand-color-light));
  --theme-color-text: var(--brand-color-light);
  --theme-color-text-muted: color-mix(
    in srgb,
    var(--brand-color-dark) 60%,
    var(--brand-color-light)
  );
  --theme-color-primary: var(--brand-color-primary);
  --theme-color-secondary: var(--brand-color-secondary);
  --theme-color-accent: var(--brand-color-accent);
  --theme-color-tertiary: var(--brand-color-tertiary);
  --theme-color-contrast: var(--brand-color-contrast);

  /* Type */
  --theme-font-body: ui-sans-serif, system-ui, sans-serif;
  --theme-font-heading: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Radius */
  --theme-radius-sm: 0.375rem;
  --theme-radius-md: 0.75rem;
  --theme-radius-lg: 1.5rem;
  --theme-radius-pill: 62.5rem;

  /* Motion */
  --theme-ease-signature: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing scale */
  --theme-space-xs: clamp(24px, 2.2vw, 36px);
  --theme-space-sm: clamp(28px, 3vw, 48px);
  --theme-space-md: clamp(32px, 4vw, 56px);
  --theme-space-lg: clamp(32px, 5vw, 72px);
  --theme-space-xl: clamp(48px, 6vw, 80px);
}

/* Example dark-theme override — uncomment and adjust once real dark-mode
   support is needed. Only the semantic layer needs repointing. */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --theme-color-background: var(--brand-color-dark);
    --theme-color-surface: color-mix(in srgb, var(--brand-color-dark) 85%, white);
    --theme-color-border: color-mix(in srgb, var(--brand-color-light) 20%, var(--brand-color-dark));
    --theme-color-text: var(--brand-color-light);
    --theme-color-text-muted: color-mix(in srgb, var(--brand-color-light) 60%, var(--brand-color-dark));
    --theme-color-contrast: var(--brand-color-light);
  }
}
*/

/* Stacked-tab stagger: each tab ends one step further right than the one above */
:root {
  --theme-tab-step: clamp(12px, 1.8vw, 28px);
}