/* Deepgram Labs live brand tokens — labs.deepgram.com/theme.css
 * Generated from tokens.css by tools/build/sync-tokens.mjs. Do not edit.
 * Selectors are specificity-elevated so these override the pinned copy
 * bundled in @deepgram/labs-ui. */

/**
 * Deepgram Labs brand tokens — the single source of truth.
 *
 * This file is delivered two ways and must stay identical in both:
 *   1. bundled into @deepgram/labs-ui as a pinned fallback
 *   2. served live at https://labs.deepgram.com/theme.css
 *
 * Only raw custom properties belong here. The `@theme inline` mapping that
 * turns these into Tailwind utilities lives in theme.css and must be present
 * at BUILD time — that is why the two files are separate.
 *
 * Edit this file to re-theme every deployed labs app on its next page load.
 */

:root:root {
  /* Light mode - Clean Deepgram light theme */
  --background: #ffffff;
  --foreground: #16191c;
  --card: #f7f8f9;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  /* Muted teal, darkened for white. Same role as dark mode's #5f9e92.
     Foreground is white, not near-black: #0a0a0a on this teal is 3.97:1 and
     fails AA, white is 4.99:1 and passes. */
  --primary: #3d7a70;
  --primary-foreground: #ffffff;
  /* Slate blue, darkened for white. #0a0a0a on it is 3.43:1; white is 5.78:1. */
  --secondary: #4a63a8;
  --secondary-foreground: #ffffff;
  --muted: #f1f3f4;
  --muted-foreground: #5c656d;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #e3e6e8;
  --input: #c0c4c8;
  --ring: rgba(107, 114, 128, 0.3);
  /* The same teal→blue→violet→rose→amber ramp as dark mode, each step
     darkened to hold ≥3:1 against white (WCAG 1.4.11, non-text). The old
     green→cyan→mint tail lived on here after the retheme. */
  --chart-1: #3d7a70;
  --chart-2: #4a63a8;
  --chart-3: #7d55a8;
  --chart-4: #a84f74;
  --chart-5: #a97a10;
  --signal: #a97a10;
  --signal-foreground: #ffffff;

  --radius: 0.5rem;
  --sidebar: #f8f9fa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #ffffff;
  --sidebar-primary-foreground: #0a0a0a;
  --sidebar-accent: #f1f3f4;      /* a neutral hover, as in dark mode — this
                                     was the brand colour, which made every
                                     sidebar hover a full-strength accent */
  --sidebar-accent-foreground: #16191c;
  --sidebar-border: #dee2e6;
  --sidebar-ring: rgba(107, 114, 128, 0.3);
}

:root:root .dark, .dark:root:root {
  /* Dark — the default. A cool graphite instrument panel, not a black void.
     Neutrals carry a faint blue cast so they read as *chosen* rather than
     as untinted #111/#222 greys. */
  --background: #08090b;
  --foreground: #e6e9ec;          /* cool paper, never pure white — #fff on
                                     near-black vibrates and fatigues */
  --card: #0e1013;                /* panels barely lift off the ground */
  --card-foreground: #e6e9ec;
  --popover: #14171a;
  --popover-foreground: #e6e9ec;

  /* Muted teal. CTAs, focus rings, active states, micro-labels — the one
     colour that says "this is interactive or important". Deepgram-adjacent
     without the acid: #13ef95 at full chroma dominated everything it touched,
     so it is gone from the system entirely. */
  --primary: #5f9e92;
  --primary-foreground: #08090b;

  /* Slate blue. Secondary accents, the far end of gradients, the second data
     series. Cool enough to sit beside the teal as a sibling rather than
     competing with it. */
  --secondary: #6f8fd0;
  --secondary-foreground: #08090b;

  --muted: #14171a;
  --muted-foreground: #848d95;
  --accent: #1e2226;
  --accent-foreground: #e6e9ec;
  --destructive: #e5484d;
  --destructive-foreground: #e6e9ec;
  --border: #1e2226;              /* hairline, not a bevel */
  --input: #2a2f34;
  --ring: rgba(95, 158, 146, 0.45);

  /* One warm accent, spent once per screen — a status badge, a live pill.
     Its scarcity is the point. */
  --signal: #e0b341;
  --signal-foreground: #08090b;

  /* Charts need real range. Five greens cannot separate five series. */
  --chart-1: #5f9e92;
  --chart-2: #6f8fd0;
  --chart-3: #a682cf;
  --chart-4: #d1789e;
  --chart-5: #e0b341;

  --sidebar: #0e1013;
  --sidebar-foreground: #e6e9ec;
  --sidebar-primary: #5f9e92;
  --sidebar-primary-foreground: #08090b;
  --sidebar-accent: #14171a;
  --sidebar-accent-foreground: #e6e9ec;
  --sidebar-border: #1e2226;
  --sidebar-ring: rgba(95, 158, 146, 0.45);
}