/**
 * WMG Chords — design tokens (dark mode, WMG brand)
 * Sourced from zeroheight styleguide via MCP (Color, Typography, Spacing & radius, Buttons).
 * Design system foundations: /dashboard/design-system/foundation-*.html (typography ↔ Figma node 88:668).
 */

:root {
  /* Base neutrals — zeroheight base scale includes 150, 250, 400 */
  --base-0: #ffffff;
  --base-50: #fafafa;
  --base-100: #f0f0f0;
  --base-150: #e6e6e6;
  --base-200: #dbdbdb;
  --base-250: #d1d1d1;
  --base-300: #878787;
  --base-350: #666666;
  --base-400: #575757;
  --base-450: #3d3d3d;
  --base-500: #313131;
  --base-550: #282828;
  --base-600: #232323;
  --base-650: #191919;
  --base-700: #131313;
  --base-750: #090909;

  /* WMG brand */
  --wmg-blue-50: #e9f1fe;
  --wmg-blue-200: #99bdfa;
  --wmg-blue-300: #6b9ff8;
  --wmg-blue-400: #4e8cf7;
  --wmg-blue-500: #226ff5;
  --wmg-blue-700: #184fae;
  --wmg-blue-900: #0e2f67;
  --wmg-dark-blue-200: #8aa1d3;
  --wmg-dark-blue-400: #335bb3;
  --wmg-dark-blue-500: #0032a0;
  --wmg-dark-blue-700: #002472;
  --wmg-yellow-200: #f7ffa9;
  --wmg-yellow-400: #f1ff69;
  --wmg-yellow-500: #edff43;
  --wmg-yellow-700: #a8b530;

  /* System */
  --sys-success: #4de885;
  --sys-success-deep: #00813d;
  --sys-error: #ff8c8c;
  --sys-error-deep: #d42b3a;
  --sys-warning: #ffb800;
  --sys-info: #2556ea;
  /* Info — lighter blues for text/icons on dark (zeroheight system.bright blue) */
  --sys-info-muted: #9bb1f5;
  --sys-info-foreground: #6d8ef1;

  /* Status tints — badges, pills, soft surfaces on dark */
  --surface-success-muted: rgba(77, 232, 133, 0.12);
  --surface-success-soft: rgba(77, 232, 133, 0.15);
  --surface-warning-muted: rgba(255, 184, 0, 0.12);

  /* Dark mode semantic — backgrounds */
  --bg-default: var(--base-750);
  --bg-level-01: var(--base-700);
  --bg-level-02: var(--base-650);
  --bg-level-03: var(--base-600);
  --bg-level-04: var(--base-550);
  --bg-level-05: var(--base-500);
  --alpha-bg-default: rgba(255, 255, 255, 0.06);
  --alpha-bg-strong: rgba(255, 255, 255, 0.12);
  --alpha-bg-medium: rgba(255, 255, 255, 0.1);

  /* Dark mode semantic — text (zeroheight text.* dark mode) */
  --text-default: var(--base-100);
  --text-subtle: var(--base-300);
  --text-hover: var(--base-200);
  --text-pressed: var(--base-50);
  --text-disabled: var(--base-350);
  --text-strong: var(--base-0);
  --text-strong-on-light: var(--base-650);
  --text-strong-on-dark: var(--base-0);

  /*
   * Primary interactive — WMG blue (Chords default).
   * ADA / alternate theme uses pink primaries; do not use those values here.
   */
  --primary-default: var(--wmg-blue-500);
  --primary-hover: var(--wmg-blue-200);
  --primary-pressed: var(--wmg-blue-400);
  --primary-disabled-bg: var(--wmg-blue-900);

  /* Focus ring — buttons & controls (border/focused #5bc5f8) */
  --focus-ring: #5bc5f8;

  /* Form fields — Figma input container (e.g. date picker 3888:12326) */
  --field-border-subtle: rgba(255, 255, 255, 0.12);
  /* Figma border/strong-emphasis — roster filter rows, dropdown panel edges */
  --border-strong-emphasis: rgba(255, 255, 255, 0.19);
  --field-bg-default: rgba(255, 255, 255, 0.06);
  --field-bg-hover: rgba(255, 255, 255, 0.12);

  /* Links & inline accents — same hue as primary */
  --interactive-blue: var(--primary-default);

  /* Secondary button — outline on dark: clear fill, 1px white stroke (Figma / WMG Chords) */
  --secondary-border: var(--base-0);
  --secondary-hover-bg: var(--alpha-bg-default);
  --secondary-pressed-bg: var(--alpha-bg-strong);
  --secondary-disabled-border: rgba(255, 255, 255, 0.35);

  /*
   * Spacing — zeroheight spacing.* (number scale). Figma: spacing.default … spacing.5xlarge.
   * CSS uses px aliases; use tokens for gap, padding, and margin — avoid one-off pixel values.
   */
  --space-0: 0;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;

  /*
   * Radius — zeroheight radius.*. Figma token radius.full = 990; CSS uses 9999px for pill/circular rounding.
   */
  --radius-0: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-full: 9999px;

  /*
   * Typography — Figma WMG Chords file: Product typescale (88:668).
   * Typeface: SF Pro. Sizes: font/size 4xl→xs = 36, 32, 24, 20, 18, 16, 14, 12.
   * Semibold in Figma ≈ 590; CSS uses 600. Italic: use font-style italic (system fallback).
   */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fs-display-lg: 36px;
  --fs-display-md: 32px;
  --fs-display-sm: 24px;
  --fs-headline-md: 20px;
  --fs-headline-sm: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Line height: Figma "auto" → normal; fixed pairs from typescale */
  --lh-auto: normal;
  --lh-body-sm: 18px;
  --lh-caption: 16px;
  --lh-body-loose: 1.45;
  /* Letter-spacing: display/large & display/medium (not display/small) — 0.5px in Figma */
  --tracking-display: 0.5px;

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 64px;

  /* Nav — Link farm / one-app expanded rail (Figma Expanded - Releases hover) */
  --nav-rail-expanded-width: 264px;
  --sidebar-nav-item-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --sidebar-nav-active-gradient: linear-gradient(
    72deg,
    rgba(255, 255, 255, 0.06) 16.42%,
    rgba(255, 255, 255, 0.09) 82.53%
  );

  /* Overlays & toasts — match Figma / design system docs (use instead of ad-hoc rgba) */
  --overlay-scrim: rgba(0, 0, 0, 0.65);
  --toast-bg: #2b2b2b;
  --toast-border-top-highlight: rgba(255, 255, 255, 0.22);
  /* Focus glow on primary interactive (search, inputs) */
  --focus-glow-primary: rgba(34, 111, 245, 0.35);
}