/* ---------------------------------------------------------------------------
 * SEO Ops — design tokens (single source of truth for public surfaces)
 *
 * Consumed by: static/welcome.html
 * Next to migrate: static/onboarding.html, then map these into the Vuetify
 * colour map in web/src/plugins/vuetify.ts so console and site agree.
 *
 * Two teals (#095649 site / #0F6B5C console) and four typefaces across site +
 * console was the actual design problem. This resolves them to one ramp and
 * two families.
 *
 * ==== SYSTEM LAYER (everything below the brand block) ====
 * Neutrals, type, shape, spacing, semantic colour. NOT partner-overridable.
 * This is the part that ships under their name and is the actual product —
 * an agency replaces the mark, never the information design.
 *
 * Contrast on --paper-50: ink-900 15.9:1 · ink-700 8.9:1 · ink-500 5.1:1 ·
 * spruce-600 8.4:1 · ochre-600 4.9:1. All >= 4.5:1 for normal text (WCAG 2.2 AA).
 * ------------------------------------------------------------------------- */

:root {
  /* --- neutrals: green-biased, chosen rather than inherited grey --- */
  --ink-900: #0e1614;
  --ink-700: #2c3a36;
  --ink-500: #56635e;
  --paper-50: #f2f4f1;
  --panel-0: #fbfcfa;
  --sunk-100: #e8ece8;
  --line: rgba(14, 22, 20, 0.14);
  --line-soft: rgba(14, 22, 20, 0.07);

  /* ==== BRAND LAYER — an agency overrides these ====
     Everything a partner can make theirs. White-label swaps this block and
     nothing else. Keep it small on purpose: the fewer knobs, the harder it is
     for a partner to produce something ugly with our name still on the craft.
     Components must never reference a raw hex — always --brand-*. */
  --brand-primary:      #0b5348;
  --brand-primary-deep: #073e36;
  --brand-primary-wash: #e2ede9;
  --brand-accent:       #96601c;
  --brand-accent-wash:  #f5ecdd;
  --brand-name:         "SEO Ops";
  --brand-analyst:      "Scout";

  /* Back-compat aliases. Existing rules keep working; new work uses --brand-*. */
  --spruce-600: var(--brand-primary);
  --spruce-700: var(--brand-primary-deep);
  --spruce-100: var(--brand-primary-wash);

  /* --- attention. Semantic in the console, art direction on the site.
         Same meaning in both places: "look here". --- */
  --ochre-600: var(--brand-accent);
  --ochre-100: var(--brand-accent-wash);

  /* --- semantic only. Never used as a brand accent. --- */
  --ok-600: #2f735b;
  --warn-600: #9a6b28;
  --crit-600: #8f3232;

  /* --- type: two families, three roles --- */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- shape: 3px structural. 999px is reserved for status pills, so
         roundness carries meaning instead of being ambient. --- */
  --radius: 3px;
  --radius-pill: 999px;

  /* --- measure --- */
  --measure: 66ch;
  --shell: 1120px;

  /* --- remap the shared site nav onto the new ramp. site-nav.css declares
         these in :root and tokens.css is linked after it, so these win on
         /welcome while /onboarding keeps its current look until migrated. --- */
  --site-nav-ink: var(--ink-900);
  --site-nav-muted: var(--ink-700);
  --site-nav-accent: var(--spruce-600);
  --site-nav-accent-soft: var(--spruce-100);
  --site-nav-line: var(--line);
  --site-nav-bg: rgba(251, 252, 250, 0.88);
  --site-nav-brand: var(--font-sans);

  /* --- card suits (#270). One hue per lens: hue says WHAT KIND of work,
         never how good or how urgent (#112). Categorical, equal-weight,
         every pair ≥ 4.5:1 as text on --panel-0. SYSTEM layer: a partner
         brand never changes these — the deck is the product. --- */
  --suit-ctr_fix:          #5b4a9c; --suit-ctr_fix-wash:          #ece8f6;
  --suit-structure_schema: #1f6f8b; --suit-structure_schema-wash: #e2eff4;
  --suit-consolidation:    #7a4e2d; --suit-consolidation-wash:    #f3e9e1;
  --suit-content_gap:      #2f735b; --suit-content_gap-wash:      #e3efe9;
  --suit-ai_answer_layer:  #4a5f9e; --suit-ai_answer_layer-wash:  #e6eaf6;
  --suit-authority_links:  #8a4f7a; --suit-authority_links-wash:  #f3e6ef;
  --suit-hygiene:          #56635e; --suit-hygiene-wash:          #e8ece8;
  --suit-local:            #7d561f; --suit-local-wash:            #f5ecdd;
  --suit-merchandising:    #a1522f; --suit-merchandising-wash:    #f6e7df;
  --suit-ecomm_visibility: #2e672c; --suit-ecomm_visibility-wash: #e4efe2;
  --suit-risk:             #8f3232; --suit-risk-wash:             #f6e3e3;
  /* identity — the 12th lens (alignment_fix). cardSuits.ts referenced
     --suit-identity and it was never defined here, so ~40% of a studio99 deck
     rendered with an undefined hue (Copilot, #369). Placed at 284°, the middle
     of the largest usable gap in the wheel (64°, between ctr_fix at 252° and
     authority_links at 316°); the wider 83° gap at 77° is olive, where nothing
     clears the contrast bar. Measured: 6.01:1 on --panel-0, 32° from its
     nearest neighbour. Gauge owns the palette — worth an eye. */
  --suit-identity:         #844999; --suit-identity-wash:         #eedcf5;
}