/* tokens.css - Design tokens (single source of truth)
   Owner: SHELL agent. Do not edit shared/other-owned files.
   All colors, radii, spacing, motion and layout constants live here as CSS vars.
   Every color in the app must come from a token. */

:root {
  /* ---------- Backgrounds ---------- */
  --bg: #F7F8FA;             /* app background */
  --surface: #FFFFFF;        /* cards, panels */
  --surface-2: #F1F3F6;      /* secondary areas, soft hover */

  /* ---------- Text ---------- */
  --ink: #16181D;            /* headings, primary text */
  --ink-2: #4B5563;          /* secondary text */
  --muted: #8A93A2;          /* helper text, placeholders */

  /* ---------- Borders & shadows ---------- */
  --border: #E6E9EF;
  --shadow-sm: 0 1px 2px rgba(22, 24, 29, .05);
  --shadow-md: 0 4px 16px rgba(22, 24, 29, .07);
  --shadow-lg: 0 12px 40px rgba(22, 24, 29, .12);

  /* ---------- Accent (default indigo, replaced live from settings) ---------- */
  --accent: #4F46E5;
  --accent-ink: #FFFFFF;     /* text on accent */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, white);
  --accent-border: color-mix(in srgb, var(--accent) 25%, white);
  --accent-strong: color-mix(in srgb, var(--accent) 88%, black); /* hover deepen */

  /* ---------- Semantic ---------- */
  --success: #16A34A;  --success-soft: #EAF7EF;
  --danger:  #DC2626;  --danger-soft:  #FDEDED;
  --warning: #D97706;  --warning-soft: #FDF3E3;

  /* ---------- Shape ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;
  --space: 4px;              /* 4px grid: use multiples */

  /* ---------- Typography ---------- */
  --font: "Rubik", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Stage palette (8 fixed colors for pipeline stages & badges) ---------- */
  --stage-indigo: #4F46E5;
  --stage-sky:    #0284C7;
  --stage-teal:   #0D9488;
  --stage-green:  #16A34A;
  --stage-amber:  #D97706;
  --stage-pink:   #DB2777;
  --stage-purple: #7C3AED;
  --stage-slate:  #64748B;

  /* ---------- Layout constants ---------- */
  --header-h: 56px;
  --mobnav-h: 60px;
  --content-max: 1240px;
  --panel-w: 440px;          /* contact slide-over width */

  /* ---------- Focus ring ---------- */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  --ring-danger: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);

  /* ---------- Motion (gentle, ease-out, 120-220ms) ---------- */
  --t-fast: 120ms;
  --t: 160ms;
  --t-slow: 220ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ---------- Z layers ---------- */
  --z-banner: 60;
  --z-header: 100;
  --z-fab: 120;
  --z-panel: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-overlay: 500;          /* "system is off" overlay sits above everything */
}