/*
 * Ghost Agent Labs design tokens. The single source of truth for color, type, shape, depth, and motion.
 *
 * Two layers:
 *   1. Palette (--gal-*): the raw brand colors. Reference these only from this file.
 *   2. Semantic tokens (--color-*, --font-*, --radius-*, ...): what pages and components use.
 *      Name a token by its job ("accent", "surface-muted"), never by its hue.
 *
 * Used by the marketing site (copied to site/assets/tokens.css by `npm run brand:sync`) and the app
 * (imported from @ghost-agent-labs/brand). Living reference: https://ghostagentlab.com/brand/
 * Edit this file, never the site copy; the brand tests fail if they differ.
 */
:root {
  /* ---------------------------------------------------------------- 1. Palette */

  /* Forest: our darks. Hero, footer, sidebar, inverse surfaces. */
  --gal-forest-950: #09211a;
  --gal-forest-900: #0d2b22;
  --gal-forest-800: #12382d;
  --gal-forest-700: #1d4c3e;
  --gal-pine: #223731;
  --gal-forest-850: #0f3328;
  --gal-forest-500: #3d7563;

  /* Night: the console screens (mission control, live feed) sit on a darker forest. */
  --gal-night-950: #071a14;
  --gal-night-900: #0a231b;
  --gal-night-850: #0d2a21;
  --gal-night-800: #10322a;
  --gal-night-750: #13342a;
  --gal-night-700: #16392e;
  --gal-night-500: #2b6b56;
  --gal-night-ink-100: #dceae4;
  --gal-night-ink-200: #cfe2d9;
  --gal-night-ink-300: #a8c7bb;
  --gal-night-ink-400: #86a69a;
  --gal-night-mint: #5cf0b4;
  --gal-night-red: #f2795f;
  --gal-night-amber: #f0b85a;
  --gal-night-blue: #6b9ff0;
  --gal-night-violet: #a993ef;

  /* Emerald: the brand green. 500 is the signature hue; 600 and darker carry white text at WCAG AA. */
  --gal-emerald-800: #0b5a46;
  --gal-emerald-700: #0f6e56;
  --gal-emerald-600: #13805f;
  --gal-emerald-500: #1d9e75;
  --gal-emerald-300: #5dcaa5;
  --gal-emerald-200: #a7e3c8;
  --gal-emerald-150: #d5f0e3;
  --gal-emerald-100: #e1f5ee;
  --gal-emerald-50: #f3faf7;

  /* Jade: the brighter green of the AI assistant. */
  --gal-jade-600: #059669;
  --gal-jade-500: #10b981;

  /* Neutrals, tinted toward green so greys never look cold next to forest. */
  --gal-paper: #ffffff;
  --gal-cream: #f0f3eb;
  --gal-sand-100: #f5efe6;
  --gal-sand-400: #d9b866;
  --gal-mist: #f4f6f5;
  --gal-grey-100: #edf1ef;
  --gal-grey-150: #e8eeeb;
  --gal-grey-200: #e2e8e5;
  --gal-grey-300: #cfd8d4;
  --gal-grey-400: #b9c6bf;
  --gal-grey-500: #93a39b;
  --gal-grey-600: #6b7771;
  --gal-grey-700: #4d5f57;
  --gal-grey-900: #17261f;

  /* Inverse text on forest. */
  --gal-frost-100: #e6f3ee;
  --gal-frost-200: #d7e6df;
  --gal-frost-300: #c4dbd1;
  --gal-frost-400: #9fbdb1;
  --gal-frost-500: #7d978c;

  /* Signals. */
  --gal-amber-500: #d98a06;
  --gal-amber-700: #9a6505;
  --gal-amber-on-dark: #fcd34d;
  --gal-amber-fill-on-dark: #fbbf24;
  --gal-orange-600: #b9501c;
  --gal-amber-800: #7d5300;
  --gal-amber-200: #f0dcaa;
  --gal-amber-100: #fbf0d9;
  --gal-red-500: #cf3f36;
  --gal-red-600: #b3312a;
  --gal-red-fill-on-dark: #f87171;
  --gal-red-700: #a1271f;
  --gal-red-300: #ffb4ae;
  --gal-red-200: #f6c9c5;
  --gal-red-100: #fde7e5;
  --gal-blue-500: #3b7be0;
  --gal-blue-700: #1d55a8;
  --gal-blue-200: #c9dbf5;
  --gal-blue-100: #e6effc;
  --gal-violet-500: #9a7be8;
  --gal-violet-700: #5b3b99;
  --gal-violet-100: #efe7fb;
  --gal-slate-700: #34505e;
  --gal-slate-100: #e6ecef;
  --gal-gold-500: #e3a33b;

  /* ---------------------------------------------------------------- 2. Semantic tokens */

  /* Surfaces */
  --color-bg: var(--gal-paper);              /* marketing page background */
  --color-bg-app: var(--gal-mist);           /* app canvas behind cards */
  --color-surface: var(--gal-paper);         /* cards, inputs, menus */
  --color-surface-muted: var(--gal-cream);   /* alternate sections, soft cards */
  --color-surface-sunken: var(--gal-grey-100); /* neutral chips, hover rows */
  --color-surface-accent: var(--gal-emerald-100); /* mint: highlighted cards, open FAQ, success */
  --color-surface-inverse: var(--gal-forest-950);        /* hero, CTA, footer */
  --color-surface-inverse-raised: var(--gal-forest-900); /* dark cards, sidebar, code blocks */
  --color-surface-inverse-hover: var(--gal-forest-800);
  --color-surface-inverse-active: var(--gal-forest-700);
  --color-surface-inverse-pill: var(--gal-pine);         /* the floating nav pill */
  --color-surface-inverse-overlay: var(--gal-forest-850);/* menus and tooltips opened from the sidebar */
  --color-surface-warm: var(--gal-sand-100);             /* site monograms and the sidebar's next-step card */
  --color-surface-accent-wash: var(--gal-emerald-50);    /* a faint mint fade at the top of panels */

  /* Text */
  --color-ink: var(--gal-grey-900);          /* body text and headings */
  --color-ink-heading: var(--gal-forest-900);
  --color-ink-muted: var(--gal-grey-700);    /* secondary text; AA on every light surface */
  --color-ink-faint: var(--gal-grey-600);    /* captions and hints; AA on white */
  --color-ink-inverse: var(--gal-paper);
  --color-ink-inverse-soft: var(--gal-frost-200);   /* body text on forest */
  --color-ink-inverse-muted: var(--gal-frost-400);  /* secondary text on forest */
  --color-ink-inverse-faint: var(--gal-frost-500);

  /* Accent */
  --color-accent: var(--gal-emerald-600);        /* primary buttons, links, accent text on light */
  --color-accent-hover: var(--gal-emerald-700);
  --color-accent-strong: var(--gal-emerald-700); /* accent text on mint */
  --color-accent-brand: var(--gal-emerald-500);  /* the signature green: icons, rings, charts, never small text */
  --color-accent-on-dark: var(--gal-emerald-300);/* wordmark, eyebrows, links on forest */
  --color-accent-soft: var(--gal-emerald-100);
  --color-on-accent: var(--gal-paper);

  /* Lines */
  --color-border: var(--gal-grey-200);           /* cards, tables, dividers */
  --color-border-strong: var(--gal-grey-300);    /* inputs, secondary buttons */
  --color-border-inverse: rgb(255 255 255 / .1); /* dividers on forest */
  --color-border-inverse-faint: rgb(255 255 255 / .06); /* row rules inside panels on forest */
  --color-track: var(--gal-grey-150);            /* empty part of bars and gauges */
  --color-border-accent: rgb(15 110 86 / .18);   /* rules inside mint or accent content */
  --color-border-hover: var(--gal-grey-400);     /* inputs and controls on hover */
  --color-border-inverse-hover: var(--gal-forest-500);
  --color-border-sample: var(--gal-sand-400);    /* dashed outline around sample data */
  --color-accent-halo: var(--gal-emerald-150);   /* 3px ring around an open or focused control */

  /* Status: one meaning everywhere. Fill for dots and bars, ink for text, soft for backgrounds. */
  --color-pass: var(--gal-emerald-500);
  --color-pass-ink: var(--gal-emerald-700);
  --color-pass-soft: var(--gal-emerald-100);
  --color-pass-border: var(--gal-emerald-200);
  --color-warn: var(--gal-amber-500);
  --color-warn-ink: var(--gal-amber-800);
  --color-warn-soft: var(--gal-amber-100);
  --color-warn-border: var(--gal-amber-200);
  --color-fail: var(--gal-red-500);
  --color-fail-ink: var(--gal-red-700);
  --color-fail-soft: var(--gal-red-100);
  --color-fail-border: var(--gal-red-200);
  --color-fail-on-dark: var(--gal-red-300);
  --color-fail-fill-on-dark: var(--gal-red-fill-on-dark);
  --color-pass-soft-on-dark: rgb(52 211 153 / .15);  /* tag backgrounds on forest */
  --color-fail-soft-on-dark: rgb(248 113 113 / .15);
  --color-warn-on-dark: var(--gal-amber-on-dark);
  --color-warn-fill-on-dark: var(--gal-amber-fill-on-dark);
  --color-info: var(--gal-blue-500);
  --color-info-ink: var(--gal-blue-700);
  --color-info-soft: var(--gal-blue-100);
  --color-info-border: var(--gal-blue-200);
  --color-pending: var(--gal-grey-400);
  --color-skip: var(--gal-grey-500);

  /* Score bands as solid fills (treemaps, tiles) carrying white text. */
  --color-score-good: var(--gal-emerald-600);
  --color-score-fair: var(--gal-amber-700);
  --color-score-weak: var(--gal-orange-600);
  --color-score-poor: var(--gal-red-600);
  --color-score-none: var(--gal-grey-600);

  /* Content tags (blog and article categories): soft background, ink text. */
  --color-tag-blue-soft: var(--gal-blue-100);
  --color-tag-blue-ink: var(--gal-blue-700);
  --color-tag-amber-soft: var(--gal-amber-100);
  --color-tag-amber-ink: var(--gal-amber-800);
  --color-tag-violet-soft: var(--gal-violet-100);
  --color-tag-violet-ink: var(--gal-violet-700);
  --color-tag-slate-soft: var(--gal-slate-100);
  --color-tag-slate-ink: var(--gal-slate-700);
  --color-tag-red-soft: var(--gal-red-100);
  --color-tag-red-ink: var(--gal-red-700);

  /* Third-party marks. Google's sign-in button must use Google's own colors. */
  --color-google-surface: var(--gal-paper);
  --color-google-ink: #1f1f1f;
  --color-google-border: #dadce0;
  --color-google-hover: #f2f2f2;

  /* AI assistant: a brighter jade gradient sets the assistant apart from ordinary actions. */
  --color-ai-start: var(--gal-emerald-300);
  --color-ai-mid: var(--gal-jade-600);
  --color-ai-glow: var(--gal-jade-500);
  --shadow-ai: 0 4px 14px rgb(4 120 87 / .32), inset 0 1px 0 rgb(255 255 255 / .25);
  --shadow-ai-hover: 0 6px 18px rgb(4 120 87 / .4), inset 0 1px 0 rgb(255 255 255 / .25);
  --shadow-ai-mark: 0 10px 28px rgb(4 120 87 / .32);
  --shadow-ai-mark-sm: 0 4px 12px rgb(4 120 87 / .3);

  /* Console: the always-on dark screens (mission control, live feed, radar). */
  --color-console-bg: var(--gal-night-950);
  --color-console-surface: var(--gal-night-900);
  --color-console-raised: var(--gal-night-850);
  --color-console-hover: var(--gal-night-800);
  --color-console-line: var(--gal-night-700);
  --color-console-line-soft: var(--gal-night-750);
  --color-console-border: var(--gal-forest-700);
  --color-console-border-hover: var(--gal-night-500);
  --color-console-ink: var(--gal-night-ink-200);
  --color-console-ink-strong: var(--gal-night-ink-100);
  --color-console-ink-soft: var(--gal-night-ink-300);
  --color-console-ink-muted: var(--gal-night-ink-400);
  --color-console-mint: var(--gal-emerald-300);
  --color-console-highlight: var(--gal-night-mint);
  --color-console-red: var(--gal-night-red);
  --color-console-amber: var(--gal-night-amber);
  --color-console-search: var(--gal-night-blue);
  --color-console-training: var(--gal-night-violet);
  --color-console-agent: var(--gal-paper);
  --color-console-spoof-bg: rgb(242 121 95 / .07);
  --color-console-arrive: rgb(52 211 153 / .22);
  --color-console-pulse: rgb(52 211 153 / .6);
  --color-console-pulse-end: rgb(52 211 153 / 0);
  --shadow-console: 0 20px 50px rgb(4 20 15 / .18);

  /* Visitor types: the same color means the same kind of visitor in the app, reports, and decks.
     They differ in lightness as well as hue, so they read in greyscale. */
  --color-visitor-human: var(--gal-grey-300);
  --color-visitor-search: var(--gal-blue-500);
  --color-visitor-training: var(--gal-violet-500);
  --color-visitor-assistant: var(--gal-emerald-500);
  --color-visitor-agent: var(--gal-forest-900);
  --color-visitor-other: var(--gal-gold-500);

  /* Focus: visible on light and forest surfaces alike. */
  --focus-ring: 3px solid var(--gal-emerald-500);
  --focus-ring-on-dark: 3px solid var(--gal-emerald-300);
  --focus-offset: 2px;

  /* Type */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Funnel Display", "Manrope", system-ui, sans-serif; /* marketing headlines and big numbers */
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.8rem, 3.4vw, 2.6rem);  /* marketing h2 */
  --text-display: clamp(2.4rem, 5.6vw, 4rem); /* marketing h1 */
  --tracking-tight: -.025em;
  --tracking-eyebrow: .12em;

  /* Space: a 4px scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;

  /* Shape */
  --radius-xs: 6px;    /* code, small chips */
  --radius-sm: 10px;   /* app buttons and inputs */
  --radius-md: 14px;   /* app cards; marketing list rows */
  --radius-lg: 24px;   /* marketing cards */
  --radius-xl: 40px;   /* hero and band corners */
  --radius-pill: 999px;/* marketing buttons, tags, nav */

  /* Depth: shadows are tinted forest, never neutral grey. */
  --shadow-sm: 0 1px 2px rgb(9 33 26 / .06);
  --shadow-md: 0 1px 2px rgb(9 33 26 / .06), 0 12px 32px rgb(9 33 26 / .10);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / .35); /* cards floating on forest */
  --shadow-menu: 0 8px 24px rgb(9 33 26 / .12);
  --shadow-xs: 0 1px 2px rgb(11 43 34 / .14);
  --shadow-scrolled: 0 6px 18px rgb(15 30 25 / .07);
  --shadow-popover: 0 14px 34px rgb(15 30 25 / .16), 0 2px 6px rgb(15 30 25 / .06);
  --shadow-tooltip: 0 10px 30px rgb(11 43 34 / .25);
  --shadow-dialog: 0 18px 44px rgb(15 30 25 / .2);
  --shadow-drawer: -12px 0 40px rgb(11 43 34 / .16);
  --shadow-drawer-start: 12px 0 40px rgb(11 43 34 / .25); /* a drawer on the left, like the phone navigation */
  --shadow-sheet: 0 -10px 40px rgb(11 43 34 / .25);
  --shadow-on-dark: 0 12px 30px rgb(0 0 0 / .3);
  --color-scrim: rgb(11 43 34 / .32);        /* behind dialogs and drawers */
  --color-scrim-soft: rgb(11 43 34 / .18);   /* behind the AI panel, which leaves the page usable */
  --color-scrim-strong: rgb(11 43 34 / .5);  /* the product tour's spotlight */
  --color-pulse: rgb(29 158 117 / .45);      /* "live" dots */
  --color-pulse-end: rgb(29 158 117 / 0);
  --color-glass: rgb(255 255 255 / .92);     /* sticky bars over content */
  --color-glow: rgb(29 158 117 / .22);       /* hero radial glow */
  --color-accent-tint-on-dark: rgb(93 202 165 / .14); /* callouts on forest */
  --color-accent-tint: rgb(225 245 238 / .55);        /* highlighted table column */
  --color-ghost-line: rgb(255 255 255 / .85);/* outline buttons on forest */
  --color-ghost-fill: rgb(255 255 255 / .1); /* hover on forest */
  --color-ghost-tint: rgb(255 255 255 / .04); /* panels inset on forest */

  /* Motion */
  --duration-fast: 150ms;
  --duration-slow: 300ms;
  --duration-reveal: 800ms; /* score rings and bars filling */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}