/* CyberNative brand kit v3.0.0 "One and Many" — web tokens.
 *
 * One bold line, many fine ones. Cobalt is the company's field: header, footer, figures and the
 * home fold. Cream is the reading surface. A page opts a section into the field by giving it
 * class="field" (see components.css). The --wp-* names are kept from v2 so every existing page
 * and the account surface re-render from these values without markup changes; the legacy
 * --cn-color-* names are aliased at the bottom.
 */
:root {
  color-scheme: light;

  /* Surfaces */
  --wp-paper: #f4efe3;        /* cream: the reading surface */
  --wp-panel: #fbf8f1;        /* figures, tables, inputs */
  --wp-ink: #12163a;          /* text, rules, frames            15.23:1 on cream */
  --wp-muted: #4a4f6e;        /* metadata, captions              6.95:1 on cream */
  --wp-hair: #d9d2c0;         /* ledger lines only; never the only divider of meaning */

  /* The field */
  --wp-cobalt: #1d2bc4;       /* field, primary action, links    8.34:1 with cream */
  --wp-cobalt-deep: #141e8f;  /* field shade, mark disc          11.35:1 with cream */
  --wp-pale: #c9cdf2;         /* metadata on cobalt              6.15:1 on cobalt */

  /* Meaning. Each colour has one job. */
  --wp-bio: var(--wp-cobalt); /* the action: primary button fill */
  --wp-on-bio: #f4efe3;       /* text on the action             8.34:1 */
  --wp-cited: #dde0fa;        /* highlight behind a value that has a source (ink 13.41:1) */
  --wp-flag: #f8d4c4;         /* highlight behind a value that was left blank (ink 12.65:1) */
  --wp-rust: #9c3f17;         /* flag text and the "Limit" label   5.83:1 on cream */
  --wp-link: var(--wp-cobalt);/* inline links                     8.34:1 on cream */
  --wp-deep: var(--wp-cobalt);/* a field section; cream text 8.34:1 */
  --wp-deep-label: var(--wp-pale);
  --wp-focus: #c8331b;        /* focus ring on cream, 4.64:1. Not a fill, not a label */
  --wp-focus-field: #ffd166;  /* focus ring on cobalt, 6.64:1 */

  /* Type: Bricolage Grotesque in two pinned cuts, DM Mono for labels and values. */
  --wp-font-display: "CN Display", "CN Display Fallback", "Arial Narrow", Arial, sans-serif;
  --wp-font-body: "CN Text", "CN Text Fallback", Arial, sans-serif;
  --wp-font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wp-text-hero: clamp(2.75rem, 6vw, 5.25rem);   /* one per page, lh .95, weight 700 */
  --wp-text-title: clamp(2rem, 3.8vw, 3.25rem);   /* section title, lh 1 */
  --wp-text-h3: 1.25rem;                          /* text cut 600, lh 1.3 */
  --wp-text-lede: clamp(1.125rem, 1.6vw, 1.3125rem); /* lh 1.5 */
  --wp-text-body: 1.0625rem;                      /* lh 1.6, never smaller for reading text */
  --wp-text-ledger: 0.9375rem;                    /* tabular source values */
  --wp-text-price: 2rem;                          /* service record prices */
  --wp-text-meta: 0.875rem;                       /* short metadata only, < 40 chars */
  --wp-text-cite: 0.8125rem;                      /* mono, cite chips and labels only */

  /* Space: 4px base */
  --wp-1: 0.25rem; --wp-2: 0.5rem; --wp-3: 0.75rem; --wp-4: 1rem; --wp-6: 1.5rem;
  --wp-8: 2rem; --wp-12: 3rem; --wp-16: 4rem; --wp-24: 6rem; --wp-32: 8rem;

  /* Shape */
  --wp-rule: 1px;             /* ledger and table lines */
  --wp-rule-strong: 2px;      /* section rules, figure frames */
  --wp-radius: 4px;           /* inputs; figures and tables are square */
  --wp-pill: 999px;           /* buttons */
  --wp-page: 80rem;           /* 1280px */
  --wp-measure: 66ch;
  --wp-gutter: clamp(1.25rem, 3.4vw, 3rem);
  --wp-tap: 48px;             /* minimum interactive height */
}

[data-edition="night"] {
  color-scheme: dark;
  --wp-paper: #0e1236;
  --wp-panel: #161b4a;
  --wp-ink: #f4efe3;
  --wp-muted: #c9cdf2;
  --wp-hair: #2c3370;
  --wp-link: #c9cdf2;
  --wp-cited: #1d2bc4;
  --wp-flag: #5a2a14;
  --wp-rust: #f0a27c;
  --wp-focus: #ffd166;
}

/* v1.x aliases — delete once no stylesheet reads them. */
:root, [data-edition="night"] {
  --cn-color-canvas: var(--wp-paper);
  --cn-color-panel: var(--wp-panel);
  --cn-color-ink: var(--wp-ink);
  --cn-color-muted: var(--wp-muted);
  --cn-color-link: var(--wp-link);
  --cn-color-leaf: var(--wp-pale);   /* v1 green chips and bars: ink sits on them */
  --cn-color-leaf-strong: var(--wp-deep);
  --cn-color-mint: var(--wp-cited);
  --cn-color-amber: var(--wp-ink);   /* v1 decorative magenta shadows become ink, then go */
  --cn-color-line: var(--wp-hair);
  --cn-color-danger: var(--wp-rust);
  --cn-offset: 0px;                  /* v1 offset shadows collapse to nothing */
  --cn-offset-figure: 0px;
}