/* ============================================================
   ValueGraph brand tokens — "The Sweep" (Round 11)
   Drop this into any project and consume via hsl(var(--x)) for the
   HSL-triplet neutrals, and var(--x) directly for the brand hex/gradient.
   Names follow the shadcn convention so shadcn/ui components inherit it.
   Light only. Source of truth: docs/brand.md + the design system project.
   The app @imports this file from src/index.css. Load the webfonts yourself
   (ValueGraph uses @fontsource; the kit README has a Google Fonts <link>).
   ============================================================ */

:root {
  /* ---- neutrals: warm paper & ink ---- */
  --background: 45 24% 93%;          /* paper          #F2F0EA */
  --foreground: 38 14% 11%;          /* ink            #211E19 */
  --card: 45 40% 98%;                /* surface        #FCFBF8 */
  --card-foreground: 38 14% 11%;
  --popover: 45 40% 98%;
  --popover-foreground: 38 14% 11%;
  --secondary: 45 24% 90%;           /* surface-sunk   #ECE9E0 */
  --secondary-foreground: 38 14% 11%;
  --muted: 45 24% 90%;
  --muted-foreground: 37 10% 42%;    /* ink-muted      #756D60 */
  --accent: 45 24% 90%;
  --accent-foreground: 38 14% 11%;
  --border: 42 26% 87%;              /* hairline       #E7E2D6 */
  --input: 42 26% 87%;

  --ink-soft: 33 9% 25%;             /* #45403A */
  --faint: 39 10% 56%;               /* #9B9384 */
  --hairline-strong: 41 20% 79%;     /* #D4CDBE */

  /* ---- primary = Pine (the solid brand colour for UI) ---- */
  --primary: 168 41% 28%;            /* pine           #2B665A */
  --primary-foreground: 45 24% 93%;
  --ring: 168 41% 28%;

  /* ---- BRAND — "The Sweep" ---- */
  --brand-pine: #2B665A;             /* accent + solid UI brand colour */
  --brand-pine-ink: #1D473E;         /* pine, pressed / hover-dark */
  --brand-teal: #6FD3B9;             /* bright teal — wordmark dot on ink/dark */
  /* Tide gradient — the mark at full conviction. RESERVED: logo, login,
     one CTA per view, decks, dialogs. Never a page background or canvas fill. */
  --brand-grad: linear-gradient(60deg, oklch(0.34 0.065 175), oklch(0.70 0.125 168));

  /* ---- semantic state (independent of any accent) ---- */
  --destructive: 5 63% 49%;          /* warm red       #CB3A2E */
  --destructive-foreground: 45 40% 98%;
  --success: 142 72% 29%;            /* #15803D */
  --warning: 26 90% 37%;             /* #B45309 */
  --info: 224 76% 48%;

  /* ---- typed-node hues (canvas / minimap / badges) ---- */
  --node-customer: #F97316;
  --node-job: #3B82F6;
  --node-challenge: #EF4444;
  --node-opportunity: #22C55E;
  --node-capability: #8B5CF6;
  --node-assumption: #EAB308;
  --node-idea: #EC4899;
  --node-market-signal: #0D9488;

  /* ---- type ---- */
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;       /* wordmark + hero ONLY */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-body: 400; --fw-medium: 500; --fw-heading: 700; --fw-wordmark: 600; --fw-display: 800;

  --text-hero: 64px; --text-h1: 30px; --text-h2: 24px; --text-h3: 18px;
  --text-body: 17px; --text-body-sm: 15px; --text-label: 12px; --text-meta: 11px;

  --tracking-display: -0.02em; --tracking-heading: -0.02em;
  --tracking-wordmark: -0.01em; --tracking-label: 0.16em;
  --leading-tight: 1.05; --leading-heading: 1.15; --leading-body: 1.6;


  /* ---- ACCENTS — the attention layer ----
     Pine is scarce; node hues carry node TYPE and are never UI emphasis. These
     four steps per family build a whole callout: wash fill, border hairline,
     text (>=4.5:1 on the wash), solid chip/dot/bar.
     Escalate pine -> plum -> ember -> danger; never skip to red.
     Rule of one: at most ONE ember-or-louder element per view. */
  --pine-wash: #E9F1EF;   --pine-border: #A9CCC2;   --pine-text: #1D473E;   --pine-solid: #2B665A;
  --plum-wash: #F7EDF3;   --plum-border: #DBB9CD;   --plum-text: #74305A;   --plum-solid: #964270;
  --ember-wash: #FBF0E9;  --ember-border: #E7C1A9;  --ember-text: #96431F;  --ember-solid: #BC5A2C;
  --ochre-wash: #FAF4E3;  --ochre-border: #E0CB8D;  --ochre-text: #7E5A08;  --ochre-solid: #A8820F;
  --danger-wash: #FBECEA; --danger-border: #EDB3AB; --danger-text: #9B2C20; --danger-solid: #CB3A2E;
  --success-wash: #E9F3EC; --success-border: #A6CDB2; --success-text: #166534; --success-solid: #15803D;

  /* ---- radius & warm elevation ---- */
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(33, 30, 25, 0.07);
  --shadow-md: 0 12px 30px -18px rgba(33, 30, 25, 0.45);
}