/* GENERATED by tools/build-pages.mjs from docs/design/site/. Do not edit by hand; edit the design or the script.
 * The CanyonOps design system's colors_and_type.css, minus its font @import (the page loads fonts). */
/* CanyonOps Design System — Colors & Type
 * Source of truth: jcayonops/CanyonOps/app/globals.css
 * Fonts: Plus Jakarta Sans (headings), IBM Plex Sans (body) via Google Fonts
 */


:root {
  /* ─────────── Logo palette ─────────── */
  /* These are the exact colors used in the CanyonOps SVG logo assets.
   * They anchor the brand; the UI tokens below are inspired by them but
   * tuned for contrast and semantic use. Do not swap UI tokens for logo
   * tokens — use these only for rendering the logo or logo-adjacent chrome. */
  --logo-ink: #0F1D2E;      /* Wordmark ink (light mode) */
  --logo-paper: #F4F7FA;    /* Wordmark ink (dark mode) */
  --logo-navy: #355872;     /* Upper-left + outline tile */
  --logo-mid: #7AAACE;      /* Upper-right tile */
  --logo-sky: #9CD5FF;      /* Lower-left tile */

  /* ─────────── Brand — Navy ─────────── */
  --navy: #1B3A5C;        /* Primary brand. Headings, active states, filled checkboxes */
  --navy-dark: #122844;   /* Sidebar gradient start */
  --navy-mid: #234B73;    /* Hover state for navy elements */
  --navy-light: #2D5A8A;  /* Subtle accent */

  /* ─────────── Brand — Gold (premium) ─────────── */
  /* Retuned Oct 2025 to "Antique brass" (Option B). Deeper and warmer than
   * the previous mustard — reads as heirloom brass, pulls clear of amber. */
  --gold: #B08A3E;        /* Premium/VIP. Tier badges, recommended */
  --gold-light: #C9A961;
  --gold-pale: #FAF3E0;
  --gold-muted: #8F6E30;

  /* ─────────── Accent — Sky blue ─────────── */
  --sky: #7EC8E3;         /* Primary accent. Active indicators, links, focus rings */
  --sky-light: #C5E8F4;
  --sky-pale: #EBF6FB;
  --accent: #7EC8E3;
  --accent-light: #C5E8F4;
  --accent-pale: #EBF6FB;
  --accent-rgb: 126, 200, 227;

  /* ─────────── Neutral scale ─────────── */
  /* Cool-biased ramp (Tailwind Slate lineage). 7 stops — use only these. */
  --white: #FFFFFF;
  --off-white: #F5F7FA;   /* Page background + row hover (gray-50 was a duplicate; collapsed Oct 2025) */
  --text: #1A1E2C;
  --text-secondary: #4A5568;
  --muted: #6B7A99;
  --border: #E2E8F0;
  --border-light: #EDF2F7;

  /* ─────────── Warm paper surface ─────────── */
  /* Reserved for premium / letterhead / appreciation surfaces only.
   * Do NOT use as a general page background — it's the brand's only warm
   * neutral and it loses meaning if it appears everywhere. */
  --paper: #FAF7F1;       /* Warm off-white, ~40° hue, ~6% saturation */
  --paper-border: #E8E1D0;
  --paper-ink: #4A4238;   /* Warm ink for text on --paper surfaces */

  /* Deprecated alias — do not use in new code. Collapses to --off-white. */
  --gray-50: #F5F7FA;

  /* ─────────── Semantic status ─────────── */
  /* Retuned Oct 2025 (Option B): blue, red, purple pulled toward green+amber's
   * muted discipline so all five read as one designer's work. Every semantic
   * exposes --{color} (ink) + --{color}-soft (background). */
  --green: #2E7D5E;         /* Success / complete */
  --green-soft: #EAF5F0;
  --amber: #C07A1A;         /* Warning / pending / in review */
  --amber-soft: #FFFBEB;
  --blue: #2E5EAA;          /* Info / in progress — deepened from #3B82F6 */
  --blue-soft: #EEF2F9;
  --red: #B84848;           /* Error / overdue — warmed from #DC2626 */
  --red-soft: #FAEFEF;
  --purple: #6D4FA8;        /* AI / VFO tier — dusty plum from #7C3AED */
  --purple-soft: #F1EDF8;

  /* Deprecated aliases — do not use in new code. Point to the new tokens. */
  --green-bg: #EAF5F0;
  --green-light: #F0FFF4;
  --amber-bg: #FFFBEB;

  /* ─────────── Category colors ─────────── */
  /* Collapsed Oct 2025: --teal (solo tier) folded into --green;
   * --cat-estate (second purple) folded into --purple;
   * --cat-investment (third navy) folded into --navy. */
  --cat-financial: #B8973A;
  --cat-tax: #2E7D5E;
  --cat-insurance: #2E5EAA;  /* was #3B82F6 — matches retuned --blue */
  --cat-estate: #6D4FA8;     /* alias of --purple */
  --cat-investment: #1B3A5C; /* alias of --navy */

  /* ─────────── Cadence colors ─────────── */
  --cadence-annual: #2E7D5E;
  --cadence-quarterly: #2E5EAA;
  --cadence-semi: #C07A1A;

  /* ─────────── Layout ─────────── */
  --sidebar-w: 272px;
  --topbar-h: 56px;
  --content-max-w: 1400px;

  /* ─────────── Radii ─────────── */
  --radius-sm: 8px;       /* Buttons, inputs */
  --radius: 12px;         /* Default card */
  --radius-lg: 16px;      /* Hero cards, modals */
  --radius-full: 9999px;

  /* ─────────── Shadows ─────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --glow-sky: 0 0 0 3px rgba(126,200,227,.1);

  /* ─────────── Motion ─────────── */
  --transition: all .2s cubic-bezier(.4, 0, .2, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  /* ─────────── Type families ─────────── */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ─────────── Base typography ─────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--off-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ─────────── Semantic type roles ─────────── */
.ds-page-title   { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.ds-section-head { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.ds-card-title   { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--text); }
.ds-stat-value   { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ds-stat-label   { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.ds-body         { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text); }
.ds-small        { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--muted); }
.ds-badge        { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.ds-cat-head     { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.ds-nav          { font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.ds-sidebar-name { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.ds-sidebar-tag  { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--sky-light); letter-spacing: 0.08em; text-transform: uppercase; }

/* Editorial display scale (from globals.css) */
.ds-display-lg   { font-family: var(--font-heading); font-size: 3.5rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
.ds-display-sm   { font-family: var(--font-heading); font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.ds-headline-lg  { font-family: var(--font-heading); font-size: 2rem; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
.ds-headline-sm  { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }
.ds-title-md     { font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.4; font-weight: 600; }