/* ============================================================
   Yarneon — Design Tokens (AI Agent Operating System)
   Control-room dark by default. Single source of truth.
   Never hard-code hex/px outside this file.
   Flat by rule: every edge is an opaque border, every tint is an
   opaque colour. Nothing is lifted, faded, blurred or translucent.
   ============================================================ */

:root {
  /* ---- Background / surfaces (neutral; mill mechanics pop) ---- */
  --bg-base:   #0a0c10;   /* the one canvas, under every section */
  --bg-900:    var(--bg-base);
  --bg-800:    var(--bg-base);
  --surface-1: #141923;
  --surface-2: #1a212d;
  --surface-3: #222b3a;
  --canvas:    #0b0e13;

  /* ---- Text ---- */
  --text-primary:   #eef2f8;
  --text-secondary: #aeb7c7;
  --text-muted:     #828c9e;
  --text-faint:     #5d6677;
  --text-on-accent: #ffffff;

  /* ---- Borders / grid (inside components only, never between sections) ---- */
  --border-subtle:  #1a1e26;
  --border-default: #272c36;
  --border-strong:  #383e4a;
  --grid-line:      #15181e;
  --ring:           #9b7bf4;

  /* ---- Accent = the logo's dye violet, lifted one step for dark canvases.
          --accent-press is the exact disc colour from logo/LOGO_RESEARCH.md. ---- */
  --accent:       #8b64f0;
  --accent-hover: #9f7ff5;
  --accent-press: #5b2fc2;
  --accent-soft:  #1f1838;   /* opaque tint of the accent on the canvas */
  --accent-2:     #ff7fb0;   /* ply pink, the second strand of the mark */

  /* ---- Agent status (always paired with icon + label) ---- */
  --st-queued:  #828c9e; --st-queued-soft:  #1d2027;
  --st-running: #8b64f0; --st-running-soft: #1f1838;
  --st-waiting: #38bdf8; --st-waiting-soft: #112835;
  --st-approve: #f5a524; --st-approve-soft: #302413;
  --st-success: #2dd4a0; --st-success-soft: #102c27;
  --st-failed:  #f4516c; --st-failed-soft:  #2f171f;
  --st-blocked: #c0566b; --st-blocked-soft: #27181f;

  /* ---- Graph nodes / edges ---- */
  --node-bg:     var(--surface-3);
  --node-border: var(--border-default);
  --node-active: var(--accent);
  --edge:        #383e4a;
  --edge-muted:  #2b303a;
  --edge-active: var(--accent);

  /* ---- Generic semantic ---- */
  --good: var(--st-success);
  --warn: var(--st-approve);
  --bad:  var(--st-failed);
  --info: var(--st-waiting);

  /* ---- Type ---- */
  --font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  /* Playfair Display carries the headlines: a high-contrast didone that puts
     the fabric end of textiles on the page, against a mill-grade interface.
     Nunito Sans carries running and interface text, and Victor Mono carries
     counts, tensions, shade codes and loom IDs. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "Victor Mono", "SF Mono", ui-monospace,
               Menlo, Consolas, monospace;

  --fs-display: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
  --fs-h1:      clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --fs-h2:      clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --fs-body:    0.9375rem;
  --fs-body-lg: 1.0625rem;
  --fs-small:   0.8125rem;
  --fs-mono:    0.8125rem;
  --fs-micro:   0.6875rem;

  /* ---- Line height & tracking ---- */
  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;
  --ls-tight:   -0.02em;
  --ls-label:   0.08em;
  --ls-caps:    0.12em;

  /* ---- Spacing (4-pt base / 8-pt rhythm) ---- */
  --space-0: 0;      --space-1: 4px;    --space-2: 8px;    --space-3: 12px;
  --space-4: 16px;   --space-5: 20px;   --space-6: 24px;   --space-8: 32px;
  --space-10: 40px;  --space-12: 48px;  --space-16: 64px;  --space-20: 80px;
  --space-24: 96px;  --space-28: 112px; --space-32: 128px; --space-40: 160px;

  /* ---- Radii ---- */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Chrome ---- */
  --nav-h: 64px;

  /* ---- Containers ---- */
  --container-sm:  680px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --container-2xl: 1440px;
  --gutter: clamp(20px, 4vw, 40px);

  /* ---- Section rhythm ---- */
  --section-y:    clamp(64px, 8vw, 120px);
  --section-y-lg: clamp(88px, 10vw, 160px);

  /* ---- Control-room density ---- */
  --panel-gap:  clamp(12px, 1.2vw, 20px);
  --panel-pad:  clamp(16px, 1.6vw, 24px);
  --log-line-y: 4px;
  --node-pad:   var(--space-3) var(--space-4);
  --step-gap:   var(--space-4);
  --stack:      clamp(12px, 1.4vw, 20px);

  /* ---- Grid ---- */
  --grid-cols: 12;
  --grid-gap: var(--panel-gap);

  /* ---- Motion ---- */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 380ms; --dur-run: 600ms;
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pulse: 1.6s;

  /* ---- Elevation: flat by rule. Edges are opaque borders, and nothing is
     lifted, faded or translucent anywhere. ---- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --scrim:    #06080c;
}

/* Optional light theme. Control-room dark remains the identity. */
[data-theme="light"] {
  --bg-base:   #f7f9fc;   /* the one canvas in this theme too */
  --bg-900:    var(--bg-base);
  --bg-800:    var(--bg-base);
  --surface-1: #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #e8edf6;
  --canvas:    #f8fafd;
  --text-primary:   #0a0c10;
  --text-secondary: #3a4252;
  --text-muted:     #5d6678;
  --text-faint:     #7c8497;
  --text-on-accent: #ffffff;
  --border-subtle:  #e6e8eb;
  --border-default: #d6d8db;
  --border-strong:  #c3c5c8;
  --grid-line:      #e9ebee;
  --ring:         #5b2fc2;
  --accent:       #5b2fc2;   /* the logo disc, exactly */
  --accent-hover: #4b25a6;
  --accent-press: #3d1c8c;
  --accent-soft:  #eae3fa;
  --accent-2:     #d9437f;
  --st-queued:  #5d6678; --st-queued-soft:  #dee1e7;
  --st-running: #5b2fc2; --st-running-soft: #e4dbf7;
  --st-waiting: #0284c7; --st-waiting-soft: #d0e6f4;
  --st-approve: #b45309; --st-approve-soft: #ecded5;
  --st-success: #047857; --st-success-soft: #d2e4e5;
  --st-failed:  #be123c; --st-failed-soft:  #eed4dd;
  --st-blocked: #9f1239; --st-blocked-soft: #e9d4dd;
  --edge:       #c3c5c8;
  --edge-muted: #d9dbde;
  --scrim:      #f7f9fc;
}