/* Design System Template — tokens
   ---------------------------------------------------------------------------
   Fork surface: edit brand.json, then run `npm run customize`.
   The region between @@brand markers is generated. Everything below it is
   structural (size ladder, space scale, shadows) and stays hand-edited.

   Keep the token NAMES. Roles like --cds-primary survive a rebrand; renaming
   them means editing the whole kit.
   --------------------------------------------------------------------------- */

:root {
                            /* @@brand:start — generated by scripts/apply-brand.mjs from brand.json. Do not edit by hand. */
  --cds-paper: #070708;
  --cds-paper-deep: #121216;
  --cds-surface: #1c1c1f;
  --cds-panel: #252630;
  --cds-panel-deep: #343746;
  --cds-panel-soft: #1a1a20;

  --cds-ink: #f5f5f6;
  --cds-ink-deep: #fffef7;
  --cds-ink-muted: #a6b1c2;
  --cds-ink-soft: #718096;
  --cds-rule: rgba(245, 245, 246, 0.20);

  --cds-primary: #f2e9a8;
  --cds-primary-deep: #ffd700;
  --cds-primary-soft: #242214;
  --cds-on-primary: #070708;

  --cds-accent: #d462cd;
  --cds-accent-soft: #2d162b;
  --cds-on-accent: #070708;

  --cds-primary-1: #242214;
  --cds-primary-2: #57531c;
  --cds-primary-3: #878421;
  --cds-primary-4: var(--cds-primary);
  --cds-primary-5: #ffd700;

  --cds-success: #4ade80;
  --cds-success-bg: #112a1c;
  --cds-warning: #fbbf24;
  --cds-warning-bg: #2b200e;
  --cds-danger: #f87171;
  --cds-danger-bg: #2d1414;
  --cds-info: #93a8f4;
  --cds-info-bg: #182562;

  --cds-chart-1: var(--cds-primary);
  --cds-chart-2: var(--cds-accent);
  --cds-chart-3: var(--cds-success);
  --cds-chart-4: var(--cds-ink-muted);

  --cds-surface-dark: #182562;
  --cds-on-dark: #fffef7;
  --cds-on-dark-muted: rgba(255, 254, 247, 0.82);

  --cds-font-display: var(--wp--preset--font-family--display);
  --cds-font-body: var(--wp--preset--font-family--body);
  --cds-font-mono: var(--wp--preset--font-family--mono);

  --cds-weight-regular: var(--wp--custom--font-weight--regular);
  --cds-weight-semibold: var(--wp--custom--font-weight--emphasis);
  --cds-weight-bold: var(--wp--custom--font-weight--bold);

  --cds-radius-sm: 0.375rem;
  --cds-radius: 0.625rem;
  --cds-radius-lg: 0.875rem;
  --cds-radius-pill: 999px;

  --cds-button-radius: var(--cds-radius-pill);
  --cds-heading-font: var(--cds-font-display);
  /* @@brand:end */

  /* —— Type scale (structural; edit here, not in brand.json) —— */
  --cds-text-sm: 1rem;
  --cds-text-md: 1.125rem;
  --cds-text-lg: 1.375rem;
  --cds-text-xl: 1.75rem;
  --cds-text-2xl: 2.25rem;
  --cds-text-3xl: 3rem;
  --cds-text-4xl: 3.5rem;

  --cds-leading-display: 1.1;
  --cds-leading-snug: 1.15;
  --cds-leading-body: 1.6;
  --cds-leading-callout: 1.5;
  --cds-leading-ui: 1.35;

  --cds-tracking-display: -0.015em;
  --cds-tracking-meta: 0.06em;
  --cds-measure: 62ch;
  --cds-frame: 4 / 3;
  --cds-split-min: 18rem;
  --cds-sidebar-side: 16rem;
  --cds-sidebar-min: 50%;

  /* —— Space —— */
  --cds-ratio: 1.5;
  --cds-space-1: 0.25rem;
  --cds-space-2: 0.5rem;
  --cds-space-3: 0.75rem;
  --cds-space-4: 1rem;
  --cds-space-5: calc(var(--cds-space-4) * var(--cds-ratio));
  --cds-space-6: calc(var(--cds-space-5) * var(--cds-ratio));
  --cds-space-7: calc(var(--cds-space-6) * var(--cds-ratio));
  --cds-space-8: calc(var(--cds-space-7) * var(--cds-ratio));
  --cds-gutter: var(--cds-space-5);

  /* Gap jobs — DESIGN.md layout.cluster / stack / grid / section / split */
  --cds-cluster: var(--cds-space-3);
  --cds-stack: var(--cds-space-5);
  --cds-grid: var(--cds-space-5);
  --cds-section: var(--cds-space-6);
  --cds-split: var(--cds-space-7);

  /* Thin bar, left to right: purple, Byzantine blue, Steel Pink, gold.
     Each hue holds a band so the blends do not turn into one color.
     Same job as a reading-progress line, without tracking scroll. */
  --cds-gradient-line: linear-gradient(
    90deg,
    #9d4edd 0%,
    #9d4edd 18%,
    #1e46ff 30%,
    #1e46ff 46%,
    #ff00c8 58%,
    #ff00c8 74%,
    var(--cds-primary-deep) 86%,
    var(--cds-primary-deep) 100%
  );

  /* Illustration wash. Gold upper left, Steel Pink lower right, same pair
     as assets/illustrations/scene.svg. A fill, not the stage halo.
     Use one or the other on a region. */
  --cds-wash-aura:
    radial-gradient(62% 58% at 0% 0%, rgba(255, 215, 0, 0.28), transparent 70%),
    radial-gradient(58% 56% at 100% 100%, rgba(212, 98, 205, 0.24), transparent 72%);

  /* —— Depth —— */
  --cds-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  --cds-shadow-md: 0 10px 32px rgba(0, 0, 0, 0.45);
  /* Stage aura (.cds-surface--glow). mattcromwell.com recipe: overlapping
     halos, small offsets, first layer on top. Paints are the saturated source
     hues behind the brand swatches, because a tint darkens to mud on black.
     Gold top, Steel Pink left, green right, Byzantine blue bottom. */
  --cds-shadow-stage:
    0 -36px 160px -25px rgba(255, 215, 0, 0.55),
    -40px 20px 160px -25px rgba(255, 0, 200, 0.5),
    40px 20px 160px -25px rgba(60, 230, 140, 0.55),
    10px 40px 160px -25px rgba(30, 70, 255, 0.55),
    -10px 40px 160px -25px rgba(30, 70, 255, 0.45);
  --cds-focus: 0 0 0 3px color-mix(in srgb, var(--cds-primary) 42%, transparent);

  --cds-button-weight: var(--cds-weight-semibold);
  --cds-max: 60rem;

  /* Padding inside a framed module (surface, specimen). Not chrome, not a page band. */
  --cds-inset: var(--cds-space-6);
}