/* ============================================================================
   Welvets · colors_and_type.css
   THE canonical token layer for the Welvets design system. All maintained
   screens, UI kits, previews, and production mappings consume or mechanically
   verify against this file. The values are the already-chosen "graphite
   language · neon blood · grotesk type" direction; nothing here is invented.

   Welvet runs TWO color channels that never mix:
     • IDENTITY → the welvet avatar (a --w-* jewel color + a rect glyph). who.
     • STATUS   → the pill (pine / rowan / neutral). how it's going.
   --brand, --pass and --rowan are reserved for the system. No welvet takes them.
   ============================================================================ */

:root{
  /* ── type ────────────────────────────────────────────────────────────── */
  --font-body:'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono','JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* ── velvet-graphite ground · the neutral ramp (plum undertone, hue ≈ 320) ── */
  --ground:#0B090E;     /* page / app base               */
  --surface:#16121B;    /* panels, cards                 */
  --surface-2:#1E1826;  /* panel bars, raised rows       */
  --post:#292135;       /* chips, scrollbar, deepest fill */
  --hover:#322843;      /* hover fill                     */
  --line:rgba(255,240,255,.12);    /* hairline border     */
  --line-2:rgba(255,240,255,.21);  /* stronger border     */
  --ink:#FFFFFF;        /* primary foreground            */
  --soft:#CBC0D8;       /* secondary text                */
  --mute:#877D96;       /* tertiary / metadata           */
  --body-base:#0B090E;  /* shell letterbox behind #stage */

  /* ── the brand · berry (interactive + the mark unit) ──────────────────── */
  --brand:#FF4FA0; --brand-press:#E03A88; --brand-ink:#190713;
  --brand-soft:rgba(255,79,160,.22);
  /* velvet · the namesake secondary (neon plum) */
  --velvet:#C95CFF; --velvet-press:#A845E0; --velvet-ink:#FBF5FF;

  /* ── status pair · semantic only, shared with the family ──────────────── */
  --pass:#3DF0A0; --pass-dim:#2BBF7D;     /* working / shipped / live   */
  --rowan:#FF5A33; --rowan-press:#E04826; /* failed / attention         */

  /* ── welvet identity palette · avatar only · cool/velvet jewel register ──
     NO green, NO orange (those mean status). Identity lives in the avatar. */
  --w-iris:#8E9BFF;   --w-orchid:#FF8ED4; --w-slate:#8FB4D9; --w-teal:#5CD6F2;
  --w-mauve:#D88BC6;  --w-indigo:#7F8AFF; --w-rose:#FF8FA8;  --w-plum:#B388E8;

  /* ── geometry · sharp ─────────────────────────────────────────────────── */
  --r-card:0px;   /* cards & panels: hard 0 */
  --r-input:2px;  /* inputs & buttons: 2px  */

  /* ── motion ───────────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.3,.7,.4,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;

  /* ── earned glow · accent and status only; identity stays matte ─────── */
  --glow-brand:0 0 20px rgba(255,79,160,.40);
  --glow-brand-hover:0 0 26px rgba(255,79,160,.52);
  --glow-panel:0 0 10px rgba(255,79,160,.40);
  --glow-nav:inset 0 0 18px rgba(255,79,160,.08);
  --glow-working:0 0 9px var(--pass);
  --glow-shipped:0 0 7px var(--pass);
  --glow-failed:0 0 9px var(--rowan);

  /* ── spacing · the φ ladder ───────────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
  --phi:1.618;

  /* ── semantic type recipes (from app.css type block) ──────────────────── */
  --h1-size:26px; --h1-weight:600; --h1-track:-.02em;  --h1-line:1.1;
  --h2-size:20px; --h2-weight:600; --h2-track:-.02em; --h2-line:1.2;
  --panel-title-size:15px; --panel-title-weight:600; --panel-title-track:-.01em;
  --body-size:14px; --body-line:1.5;
  --eyebrow-size:11px; --eyebrow-track:.16em;  /* mono · uppercase · --mute */
  --num-weight:500; /* mono · tabular-nums */
}

/* ─────────────────────────── TYPE RECIPES ─────────────────────────── */
/* These mirror app.css exactly so a page can pull either file. */
.mono{font-family:var(--font-mono);}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);}
.h1{font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1.1;margin:0;}
.h2{font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1.2;margin:0;}
.panel-title{font-weight:600;font-size:15px;letter-spacing:-.01em;}
.soft{color:var(--soft);} .mute{color:var(--mute);}
.pine{color:var(--pass);} .rowan-fg{color:var(--rowan);} .brand-fg{color:var(--brand);}

/* The wordmark: lowercase "welvets", Space Grotesk 600, -.02em. */
.wm{font-family:var(--font-body);font-weight:600;letter-spacing:-.02em;}