/* =============================================================================
   TabDSP — Shared Design Tokens
   -----------------------------------------------------------------------------
   Consolidated from the Claude Design system tree shipped inside BOTH templates
   under docs/design-reference/:
     marketing-template/_ds/fresh-v2-restyle-…/tokens/{colors,typography,spacing,effects}.css
     docs-template/_ds/fresh-v2-restyle-…/tokens/{colors,typography,spacing,effects}.css

   Both templates ship a BYTE-IDENTICAL _ds token tree (verified via diff), so
   this is a single shared design system — every token below is common to both.
   Values are transcribed VERBATIM from the source token files; nothing here is
   invented or inferred. Provenance for each group is recorded in
   docs/design-reference/EXTRACTION-NOTES.md.

   NOT included here (by scope — these are not custom-property tokens):
     - tokens/fonts.css  → ships no @font-face; system fonts only. The family
                           stacks live below as --font-sans / --font-mono.
     - tokens/base.css   → global element resets (h1–h6, a, code, scrollbars).
                           A shared *base layer*, not tokens. See notes §4.10.

   Token NAMES are preserved exactly as authored so they drop straight into the
   existing markup. (The brief's illustrative names — --color-brand-violet,
   --space-4, --font-heading — are NOT the system's scheme and are not used.)

   Theme model: dark is the default (:root). Light theme is opt-in via
   [data-theme="light"] and overrides neutrals, text, borders, and shadows only
   — accents, gradients, and module colors are shared across themes (see notes).
   ============================================================================= */

:root {

  /* ==========================================================================
     COLOR                                              source: tokens/colors.css
     Dark-first, zinc-based neutrals · cyan primary accent · per-module palette.
     ========================================================================== */

  /* --- Neutral surfaces (dark, default) --- */
  --color-bg-primary: #0a0a0b;    /* app / page background */
  --color-bg-secondary: #18181b;  /* nav, footer, cards, panels */
  --color-bg-tertiary: #27272a;   /* insets, chips, inputs, hover base */
  --color-bg-elevated: #3f3f46;   /* raised control / hover-on-tertiary */

  /* --- App-chrome darks (extension popup uses slightly deeper values) --- */
  /* Defined in the shared system but NOT referenced by the marketing/docs
     templates — they target the extension popup. Kept for completeness. */
  --color-app-bg: #0f0f11;
  --color-app-panel: #141416;
  --color-app-inset: #1c1c1f;
  --color-app-canvas: #0a0a0c;

  /* --- Text --- */
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-tertiary: #71717a;

  /* --- Brand / functional accents --- */
  --color-accent-cyan: #06b6d4;   /* PRIMARY brand accent (links, CTAs) */
  --color-accent-purple: #a855f7; /* advanced / "gear head" content */
  --color-accent-orange: #f97316;
  --color-accent-red: #ef4444;
  --color-accent-green: #22c55e;  /* success / "on" / full-support */
  --color-accent-blue: #3b82f6;   /* info, secondary link hover */

  /* --- Module color language (per-processor identity) ---
     NOTE: modules only partially reuse the accents — see notes §4.6:
       eq   #22d3ee is BRIGHTER than accent-cyan #06b6d4
       comp #f59e0b (amber) differs from accent-orange #f97316
       mb   #a855f7 == accent-purple ; lim #ef4444 == accent-red (exact) */
  --module-eq: #22d3ee;
  --module-eq-glow: rgba(34, 211, 238, 0.40);
  --module-eq-soft: rgba(34, 211, 238, 0.15);
  --module-eq-line: rgba(34, 211, 238, 0.50);

  --module-mb: #a855f7;
  --module-mb-glow: rgba(168, 85, 247, 0.40);
  --module-mb-soft: rgba(168, 85, 247, 0.15);
  --module-mb-line: rgba(168, 85, 247, 0.50);

  --module-comp: #f59e0b;
  --module-comp-glow: rgba(245, 158, 11, 0.40);
  --module-comp-soft: rgba(245, 158, 11, 0.15);
  --module-comp-line: rgba(245, 158, 11, 0.50);

  --module-lim: #ef4444;
  --module-lim-glow: rgba(239, 68, 68, 0.40);
  --module-lim-soft: rgba(239, 68, 68, 0.15);
  --module-lim-line: rgba(239, 68, 68, 0.50);

  --module-input: #e0e0e8;
  --module-input-soft: rgba(224, 224, 232, 0.18);
  --module-input-line: rgba(224, 224, 232, 0.35);
  --module-output: #e0e0e8;

  /* --- Borders --- */
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-strong: rgba(255, 255, 255, 0.18);

  /* --- Gradients --- */
  --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --gradient-purple: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  --gradient-orange: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
  --gradient-red: linear-gradient(135deg, #ef4444 0%, #f97316 100%);

  /* --- Semantic aliases --- */
  --text-body: var(--color-text-secondary);
  --text-heading: var(--color-text-primary);
  --text-muted: var(--color-text-tertiary);
  --surface-page: var(--color-bg-primary);
  --surface-card: var(--color-bg-secondary);
  --surface-inset: var(--color-bg-tertiary);
  --link-color: var(--color-accent-cyan);
  --link-hover: var(--color-accent-blue);
  --focus-ring: var(--color-accent-cyan);


  /* ==========================================================================
     TYPOGRAPHY                                     source: tokens/typography.css
     System-native sans for UI + prose; SF-Mono family for numeric readouts.
     No webfonts ship (tokens/fonts.css is empty by design).
     ========================================================================== */

  /* --- Families --- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Monaco, monospace;

  /* --- Type scale (rem, 16px base) --- */
  --font-size-xs: 0.75rem;    /* 12px — meta, eyebrows, mono readouts */
  --font-size-sm: 0.875rem;   /* 14px — secondary body, captions */
  --font-size-base: 1rem;     /* 16px — body */
  --font-size-lg: 1.125rem;   /* 18px — lede, large body */
  --font-size-xl: 1.25rem;    /* 20px — h4 / logo */
  --font-size-2xl: 1.5rem;    /* 24px — h3 */
  --font-size-3xl: 1.875rem;  /* 30px — h2 */
  --font-size-4xl: 2.25rem;   /* 36px — h1 */
  --font-size-5xl: 3rem;      /* 48px — hero display */

  /* --- Weights --- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;  /* headings */
  --font-weight-bold: 700;      /* logo, emphasis, module names */

  /* --- Line heights --- */
  --line-height-tight: 1.1;     /* hero */
  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --line-height-relaxed: 1.7;   /* long-form prose */

  /* --- Letter spacing --- */
  --tracking-tight: -0.02em;    /* hero display */
  --tracking-normal: 0;
  --tracking-eyebrow: 0.08em;   /* uppercase eyebrows / labels */

  /* --- Semantic aliases --- */
  --text-hero: var(--font-size-5xl);
  --text-title: var(--font-size-4xl);
  --text-lede: var(--font-size-lg);
  --text-readout: var(--font-mono);


  /* ==========================================================================
     SPACING & LAYOUT                                  source: tokens/spacing.css
     4px-rooted scale (xs..3xl). See media query at end for --nav-height.
     ========================================================================== */

  /* --- Spacing scale --- */
  --spacing-xs: 0.25rem;   /* 4px  */
  --spacing-sm: 0.5rem;    /* 8px  */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */

  /* --- Layout --- */
  --max-width-content: 1200px;  /* marketing / docs container */
  --max-width-narrow: 720px;    /* prose column, ledes */
  --nav-height: 64px;           /* overridden to 56px < 768px (see end) */
  --popup-width: 380px;         /* extension popup canonical width */


  /* ==========================================================================
     EFFECTS                                           source: tokens/effects.css
     Radii, borders, dark shadows, quick eased motion, nav blur.
     ========================================================================== */

  /* --- Border width --- */
  --border-width: 1px;

  /* --- Corner radii --- */
  --radius-sm: 4px;    /* chips, small buttons, inputs, param pills */
  --radius-md: 8px;    /* buttons, nav items, meters */
  --radius-lg: 12px;   /* cards, panels, modals */
  --radius-xl: 16px;   /* large feature surfaces */
  --radius-full: 9999px;

  /* --- Shadows (dark theme; light overrides below) --- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lifted: 0 4px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

  /* --- Transitions --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Glass / blur --- */
  --blur-nav: blur(8px);
  --scrim: rgba(0, 0, 0, 0.8);
}


/* =============================================================================
   TabDSP DOCS-SHELL TOKENS — site-authored (NOT from the Claude Design source)
   Added 2026-07-03 with explicit user approval to tokenize the three docs-template
   structural literals the shared system does not define. These are the ONLY
   invented values in this file; everything above is transcribed verbatim.
   Future token additions require prior approval.
   ============================================================================= */
:root {
  --max-width-docs: 980px;      /* docs two-column shell max-width (template) */
  --docs-toc-width: 200px;      /* sidebar in-page TOC rail column (template) */
  --border-width-active: 2px;   /* emphasized / active border (TOC rail + active item) */
}


/* =============================================================================
   LIGHT THEME OVERRIDES (opt-in via [data-theme="light"])
   Overrides neutrals, text, borders (colors.css) and shadows (effects.css).
   Accents, gradients, and module colors intentionally carry over unchanged.
   ============================================================================= */
[data-theme="light"] {
  /* colors.css */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #e5e5e5;
  --color-bg-elevated: #d4d4d4;

  --color-text-primary: #18181b;
  --color-text-secondary: #52525b;
  --color-text-tertiary: #71717a;

  --border-color: rgba(0, 0, 0, 0.1);
  --border-color-strong: rgba(0, 0, 0, 0.15);

  /* effects.css */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lifted: 0 4px 24px -4px rgba(0, 0, 0, 0.12), 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}


/* =============================================================================
   RESPONSIVE TOKEN OVERRIDE                           source: tokens/spacing.css
   The system's ONLY breakpoint. (base.css also carries prefers-reduced-motion.)
   ============================================================================= */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
  }
}