/* ==========================================
   TRELLIS — LEGACY TOKEN MAPPING LAYER
   ==========================================

   This file used to define the Trellis design tokens. It is now
   the ALIAS layer: every historical variable name resolves to a
   Branch token from tokens.css (which must load BEFORE this file).
   Brand values live in tokens.css — single source of truth, shared
   physics with Sceneline, Trellis engine-indigo brand block.

   RULES:
   - Never hardcode a value here that exists as a Branch token.
   - Names that COLLIDE with Branch token names (--text-primary,
     --text-secondary, --space-*, --ease-out) are NOT redefined
     here — tokens.css provides them directly. Redefining them
     here would override the Branch values (this file loads last).
   - The Trellis STATUS colors (node/approval state) are semantic
     product vocabulary, not brand — they keep literal values
     below, in both themes.

   ========================================== */

:root {

  /* ===================
     BASE COLORS → Branch ink/surfaces
     =================== */

  --color-black: var(--text-primary);
  --color-white: var(--bg-panel);

  /* Gray scale → the Branch neutral family. The two "border" greys
     resolve to --line (transparent): borders are retired, separation
     comes from the warm-vs-white step and shadow. */
  --color-gray-50: var(--bg-inset);
  --color-gray-100: var(--bg-inset);
  --color-gray-200: var(--line);
  --color-gray-300: var(--line);
  --color-gray-400: var(--text-faint);
  --color-gray-500: var(--text-secondary);
  --color-gray-600: var(--text-primary);

  /* ===================
     SEMANTIC COLORS → Branch surfaces
     =================== */

  /* Backgrounds: primary = the warm paper canvas; secondary = the
     sunken well; tertiary (was "cards, panels", darker than the page)
     FLIPS to raised white — cards float on the paper now. */
  --bg-primary: var(--bg-app);
  --bg-secondary: var(--bg-inset);
  --bg-tertiary: var(--bg-panel);

  /* Node fill: OPAQUE at rest (nodes must not be see-through). Lighter
     than the canvas so they lift. The frosted-glass look shows only on
     the drag ghost (--glass-bg + blur, set in core.js), never at rest. */
  --node-fill: #FCFBFA;

  /* Folder-pane SVG paint (fill gradient + 1px rim stroke), light. The
     folder-skin path references these via the stop-color classes in
     folder.css. Used by the settings + node-picker folder popups. Fills
     lean opaque so popup content stays readable. */
  --folder-fill-0: rgba(255, 255, 255, 0.86);
  --folder-fill-1: rgba(255, 255, 255, 0.74);
  --folder-strk-0: rgba(255, 255, 255, 0.85);
  --folder-strk-1: rgba(255, 255, 255, 0.5);
  --folder-shadow: drop-shadow(0 1px 4px rgba(20, 19, 16, 0.06))
                   drop-shadow(0 16px 36px rgba(20, 19, 16, 0.22));

  /* Text: --text-primary / --text-secondary come straight from
     tokens.css (name collision — deliberately not redefined here). */
  --text-muted: var(--text-faint);

  /* Borders: all three resolve to transparent. The one legitimate
     1px border in the system is --glass-rim on glass panes. */
  --border-color: var(--line);
  --border-color-light: var(--line);
  --border-color-strong: var(--line-strong);

  /* ===================
     ACCENT COLORS
     ===================
     The AI/generator purple merges INTO the brand accent (the engine
     indigo IS the AI-generation identity — Boek, 2026-07-12). Blue /
     green / orange / red stay as semantic state colors. */

  --color-accent-blue: #47b0dc;     /* Links, info, ready state */
  --color-accent-green: #7ee4ad;    /* Success, approved, complete */
  --color-accent-purple: var(--accent);   /* AI/generators = the brand */
  --color-accent-orange: #F57C00;   /* Warnings, in-progress, partial */
  --color-accent-red: #E53935;      /* Errors, rejected, danger */

  /* Primary action color → the brand accent (was a detached blue). */
  --color-primary: var(--accent);
  --color-primary-dark: var(--accent-ink);

  /* ===================
     STATUS COLORS — semantic product vocabulary, kept literal
     =================== */

  /* Execution status (nodes) */
  --color-status-running: #FFA000;    /* Orange - async operation in progress */
  --color-status-complete: #4CAF50;   /* Green - success */
  --color-status-error: #E53935;      /* Red - failure */
  --color-status-ready: #1E88E5;      /* Blue - ready to run */
  --color-status-pending: #999999;    /* Gray - waiting */

  /* Approval status (QA, flows) */
  --color-status-approved: #4CAF50;   /* Green */
  --color-status-rejected: #E53935;   /* Red */
  --color-status-waiting: #D0D0D0;    /* Gray */
  --color-status-waiting-hover: #C0C0C0;

  /* Status backgrounds (subtle versions for row/card backgrounds) */
  --bg-status-approved: #e8f9ef;      /* Pale green */
  --bg-status-rejected: #fceaea;      /* Pale red */
  --bg-status-ready: #d6edf8;         /* Pale blue */
  --bg-status-running: #fff3e0;       /* Pale orange */
  --bg-status-review: #e3f2fd;        /* Pale blue for review state */

  /* Status text colors (for badge/label text) */
  --text-status-approved: #2e7d4f;
  --text-status-review: #1565C0;
  --text-status-rejected: #c62828;

  /* Progress bar fills */
  --progress-approved: #7ee4ad;
  --progress-review: #7ec8e4;
  --progress-rejected: #e4a07e;

  /* ===================
     BUTTON COLORS → Branch button physics
     ===================
     The minimal/ghost buttons speak the Branch quiet vocabulary. */

  --btn-minimal-text: var(--text-faint);
  --btn-minimal-hover-bg: var(--hover-glass);
  --btn-minimal-hover-text: var(--text-secondary);
  --btn-minimal-active-bg: var(--bg-inset);
  --btn-minimal-active-text: var(--text-primary);

  /* Generator button (AI nodes) → the brand accent, per the merge. */
  --btn-generator-bg: var(--accent);
  --btn-generator-hover: var(--accent-mark);

  /* Segmented-control active pill = the raised white knob (Branch physics).
     Sceneline aliases this in themes.css; Trellis carries it here. Pairs
     with --toggle-track / --toggle-track-inset / --toggle-knob-shadow
     (defined per-theme in tokens.css). */
  --toggle-indicator-bg: var(--bg-panel);

  /* ===================
     TYPOGRAPHY → Branch type
     =================== */

  --font-family: var(--font-ui);
  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide: 0.12em;    /* legacy; new work: no uppercase,
                                       no wide tracking */

  /* ===================
     SPACING → Branch rhythm (same values, Branch names)
     =================== */

  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-3);
  --space-lg: var(--space-4);
  --space-xl: var(--space-5);
  --space-2xl: var(--space-6);
  --space-3xl: var(--space-7);

  /* ===================
     BORDER RADIUS → the Branch radii ladder
     =================== */

  --radius-none: 0;
  --radius-sm: var(--radius-soft);    /* 10px — small cards, menus  */
  --radius-md: var(--radius-field);   /* 14px — inputs, buttons     */
  --radius-lg: var(--radius-media);   /* 16px — panels, imagery     */

  /* ===================
     SHADOWS → the three Branch elevation levels
     =================== */

  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-floating);
  --shadow-glass: var(--shadow-soft);

  /* ===================
     LAYOUT
     =================== */

  --app-padding: 12px;
  --app-radius: var(--radius-sheet);  /* the big app-frame: 26px pane */

  /* ===================
     SIDEBAR
     =================== */

  --sidebar-width: 260px;

  /* ===================
     SCROLLBAR
     =================== */

  --scrollbar-thumb: #D0D0D0;
  --scrollbar-track: transparent;

  /* ===================
     ANIMATIONS
     ===================
     --ease-out comes straight from tokens.css (collision — not
     redefined here). */

  --ease-out-snappy: var(--ease-boot);              /* entrances */
  --ease-in-snappy: cubic-bezier(0.7, 0, 0.84, 0);  /* retired: nothing
                                       eases in — kept only to avoid a
                                       broken var() ref */
}

/* ===================
   GLASS EFFECT
   ===================
   The old inline recipe is superseded by the Branch glass tokens
   (tokens.css): --glass-bg + --glass-blur + --glass-rim +
   --glass-bevel, floating on --shadow-soft / --shadow-floating.
   Cards and floating chrome wear it; structural zones never do. */


/* ===========================================
   DARK THEME OVERRIDES
   ===========================================
   Everything aliased above themes itself through tokens.css. Only the
   literal status vocabulary (and the scrollbar) needs a dark colorway. */

[data-theme="dark"] {

  /* Status backgrounds (dark versions) */
  --bg-status-approved: #253a25;
  --bg-status-rejected: #3a2525;
  --bg-status-ready: #1a2d3a;
  --bg-status-running: #3a2f1a;
  --bg-status-review: #1a2d3a;

  /* Status text colors (dark versions) */
  --text-status-approved: #7ee4ad;
  --text-status-review: #64b5f6;
  --text-status-rejected: #ef9a9a;

  /* Progress bar fills (dark versions) */
  --progress-approved: #5cc48d;
  --progress-review: #5ca8c4;
  --progress-rejected: #c4885c;

  /* Node fill, dark: opaque warm panel a step lighter than the near-black
     canvas (#201D1E), so nodes lift without being see-through. */
  --node-fill: #2E2A2A;

  /* Folder-pane SVG paint, dark: smoke fill + faint light rim. */
  --folder-fill-0: rgba(52, 47, 47, 0.9);
  --folder-fill-1: rgba(42, 38, 38, 0.82);
  --folder-strk-0: rgba(255, 255, 255, 0.11);
  --folder-strk-1: rgba(255, 255, 255, 0.05);
  --folder-shadow: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4))
                   drop-shadow(0 16px 36px rgba(0, 0, 0, 0.5));

  /* Scrollbar */
  --scrollbar-thumb: #4A4A4A;
}