@speakeasy-api/moonshine 1.14.0-alpha.7 → 1.14.0

package/src/base.css

@@ -1,940 +0,0 @@
-/*
- * Base CSS - Design Tokens and CSS Variables
- *
- * ⚠️  WARNING: DO NOT IMPORT THIS FILE DIRECTLY IN YOUR PROJECT!
- * This file is only exposed for Tailwind's @reference directive to work.
- * Use the utility classes from utilities.css instead of these raw tokens.
- *
- * Structure:
- * 1. Primitive Tokens - Raw values (colors, fonts, etc.)
- * 2. Semantic/Utility Tokens - Theme-aware variables that map to utilities
- * 3. Component Tokens - Higher-level semantic tokens
- * 4. Deprecated Tokens - Shadcn compatibility (to be removed)
- */
-
-:root,
-:root.light {
-  /* ============================================
-   * 1. PRIMITIVE TOKENS
-   * Raw design values - do not use directly in components
-   * ============================================ */
-
-  /* Font Families */
-  --font-diatype: 'Diatype', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, Helvetica, Arial, sans-serif;
-  --font-diatype-mono: 'Diatype Mono', SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
-  --font-tobias: 'Tobias', 'Cormorant', Georgia, Cambria, 'Times New Roman',
-    Times, serif;
-
-  --color-base-white: hsl(0 0% 100%);
-  --color-base-black: hsl(0 0% 0%);
-
-  /* Neutrals */
-  --color-neutral-100: hsl(0, 0%, 98%);
-  --color-neutral-200: hsl(0, 0%, 92%);
-  --color-neutral-300: hsl(0, 0%, 86%);
-  --color-neutral-400: hsl(0, 0%, 73%);
-  --color-neutral-500: hsl(0, 0%, 59%);
-  --color-neutral-600: hsl(0, 0%, 46%);
-  --color-neutral-700: hsl(0, 0%, 33%);
-  --color-neutral-800: hsl(0, 0%, 20%);
-  --color-neutral-900: hsl(0, 0%, 7%);
-
-  --color-neutral-100-40: hsl(from var(--color-neutral-100) h s l / 40%);
-  --color-neutral-100-56: hsl(from var(--color-neutral-100) h s l / 56%);
-  --color-neutral-100-64: hsl(from var(--color-neutral-100) h s l / 64%);
-
-  --color-neutral-200-56: hsl(from var(--color-neutral-200) h s l / 56%);
-
-  --color-neutral-400-40: hsl(from var(--color-neutral-400) h s l / 40%);
-
-  --color-neutral-600-40: hsl(from var(--color-neutral-600) h s l / 40%);
-
-  --color-neutral-800-56: hsl(from var(--color-neutral-800) h s l / 56%);
-
-  --color-neutral-900-40: hsl(from var(--color-neutral-900) h s l / 40%);
-  --color-neutral-900-56: hsl(from var(--color-neutral-900) h s l / 56%);
-  --color-neutral-900-64: hsl(from var(--color-neutral-900) h s l / 64%);
-
-  /* Brand red */
-  --color-brand-red-100: hsl(23, 96%, 62%);
-  --color-brand-red-200: hsl(19, 84%, 58%);
-  --color-brand-red-300: hsl(14, 74%, 54%);
-  --color-brand-red-400: hsl(9, 67%, 51%);
-  --color-brand-red-500: hsl(4, 67%, 47%);
-  --color-brand-red-600: hsl(1, 62%, 39%);
-  --color-brand-red-700: hsl(359, 58%, 31%);
-  --color-brand-red-800: hsl(352, 57%, 22%);
-  --color-brand-red-900: hsl(334, 54%, 13%);
-
-  --gradient-brand-red: radial-gradient(
-    138.34% 138.34% at 0% 4.4%,
-    var(--color-destructive-900) 0%,
-    var(--color-destructive-800) 12.5%,
-    var(--color-destructive-700) 25%,
-    var(--color-destructive-600) 37.5%,
-    var(--color-destructive-500) 50%,
-    var(--color-destructive-400) 62.5%,
-    var(--color-destructive-300) 75%,
-    var(--color-destructive-200) 87.5%,
-    var(--color-destructive-100) 100%
-  );
-
-  /* Brand green */
-  --color-brand-green-100: hsl(68, 52%, 72%);
-  --color-brand-green-200: hsl(75, 37%, 64%);
-  --color-brand-green-300: hsl(84, 28%, 56%);
-  --color-brand-green-400: hsl(95, 23%, 49%);
-  --color-brand-green-500: hsl(108, 24%, 41%);
-  --color-brand-green-600: hsl(116, 24%, 34%);
-  --color-brand-green-700: hsl(128, 30%, 25%);
-  --color-brand-green-800: hsl(140, 44%, 16%);
-  --color-brand-green-900: hsl(154, 100%, 7%);
-
-  --gradient-brand-green: radial-gradient(
-    137.26% 137.26% at 0% 0%,
-    var(--color-brand-green-900) 0%,
-    var(--color-brand-green-800) 12.5%,
-    var(--color-brand-green-700) 25%,
-    var(--color-brand-green-600) 37.5%,
-    var(--color-brand-green-500) 50%,
-    var(--color-brand-green-400) 62.5%,
-    var(--color-brand-green-300) 75%,
-    var(--color-brand-green-200) 87.5%,
-    var(--color-brand-green-100) 100%
-  );
-
-  /* Brand blue */
-  --color-brand-blue-100: hsl(216, 100%, 100%);
-  --color-brand-blue-200: hsl(215, 86%, 73%);
-  --color-brand-blue-300: hsl(215, 77%, 65%);
-  --color-brand-blue-400: hsl(215, 72%, 58%);
-  --color-brand-blue-500: hsl(214, 69%, 50%);
-  --color-brand-blue-600: hsl(215, 71%, 40%);
-  --color-brand-blue-700: hsl(215, 75%, 31%);
-  --color-brand-blue-800: hsl(217, 82%, 21%);
-  --color-brand-blue-900: hsl(220, 100%, 12%);
-
-  --gradient-brand-blue: radial-gradient(
-    141.42% 141.42% at 0% 0%,
-    var(--color-brand-blue-900) 0%,
-    var(--color-brand-blue-800) 12.5%,
-    var(--color-brand-blue-700) 25%,
-    var(--color-brand-blue-600) 37.5%,
-    var(--color-brand-blue-500) 50%,
-    var(--color-brand-blue-400) 62.5%,
-    var(--color-brand-blue-300) 75%,
-    var(--color-brand-blue-200) 87.5%,
-    var(--color-brand-blue-100) 100%
-  );
-
-  /* Tech colors */
-  --color-brand-typescript: hsl(0, 0%, 0%);
-  --color-brand-go: hsl(220, 100%, 12%);
-  --color-brand-java: hsl(214, 69%, 50%);
-  --color-brand-python: hsl(216, 100%, 80%);
-  --color-brand-c: hsl(154, 100%, 7%);
-  --color-brand-terraform: hsl(108, 24%, 41%);
-  --color-brand-unity: hsl(68, 52%, 72%);
-  --color-brand-php: hsl(334, 54%, 13%);
-  --color-brand-swift: hsl(4, 67%, 47%);
-  --color-brand-ruby: hsl(23, 96%, 62%);
-  --color-brand-postman: hsl(0, 0%, 83%);
-
-  --gradient-brand-primary-colors: var(--color-brand-php) 0%,
-    var(--color-brand-swift) 12.56%, var(--color-brand-ruby) 25.06%,
-    var(--color-brand-unity) 37.56%, var(--color-brand-terraform) 50.06%,
-    var(--color-brand-c) 62.06%, var(--color-brand-go) 74.06%,
-    var(--color-brand-java) 86.06%, var(--color-brand-python) 97.06%;
-
-  --gradient-brand-primary: linear-gradient(
-    90deg,
-    var(--gradient-brand-primary-colors)
-  );
-
-  --gradient-brand-primary-y: linear-gradient(
-    180deg,
-    var(--gradient-brand-primary-colors)
-  );
-
-  /* Feedback colors */
-
-  /* Red */
-  --color-feedback-red-100: hsl(0, 100%, 97%);
-  --color-feedback-red-200: hsl(3, 84%, 85%);
-  --color-feedback-red-300: hsl(3, 78%, 71%);
-  --color-feedback-red-400: hsl(2, 74%, 58%);
-  --color-feedback-red-500: hsl(4, 67%, 47%);
-  --color-feedback-red-600: hsl(2, 65%, 39%);
-  --color-feedback-red-700: hsl(1, 64%, 32%);
-  --color-feedback-red-800: hsl(1, 63%, 24%);
-  --color-feedback-red-900: hsl(0, 62%, 17%);
-
-  --color-feedback-red-400-56: hsl(from var(--color-feedback-red-400) h s l / 56%);
-  --color-feedback-red-500-56: hsl(from var(--color-feedback-red-500) h s l / 56%);
-  --color-feedback-red-600-56: hsl(from var(--color-feedback-red-600) h s l / 56%);
-
-
-  /* Orange */
-  --color-feedback-orange-100: hsl(29, 100%, 95%);
-  --color-feedback-orange-200: hsl(30, 100%, 85%);
-  --color-feedback-orange-300: hsl(28, 100%, 74%);
-  --color-feedback-orange-400: hsl(27, 100%, 66%);
-  --color-feedback-orange-500: hsl(23, 96%, 62%);
-  --color-feedback-orange-600: hsl(22, 70%, 53%);
-  --color-feedback-orange-700: hsl(21, 64%, 43%);
-  --color-feedback-orange-800: hsl(19, 66%, 33%);
-  --color-feedback-orange-900: hsl(18, 69%, 24%);
-
-  --color-feedback-orange-400-56: hsl(from var(--color-feedback-orange-400) h s l / 56%);
-  --color-feedback-orange-500-56: hsl(from var(--color-feedback-orange-500) h s l / 56%);
-
-  /* Green */
-  --color-feedback-green-100: hsl(102, 35%, 93%);
-  --color-feedback-green-200: hsl(99, 33%, 83%);
-  --color-feedback-green-300: hsl(99, 30%, 73%);
-  --color-feedback-green-400: hsl(101, 28%, 62%);
-  --color-feedback-green-500: hsl(108, 24%, 41%);
-  --color-feedback-green-600: hsl(107, 24%, 34%);
-  --color-feedback-green-700: hsl(105, 24%, 27%);
-  --color-feedback-green-800: hsl(104, 24%, 20%);
-  --color-feedback-green-900: hsl(105, 24%, 13%);
-
-  --color-feedback-green-400-56: hsl(from var(--color-feedback-green-400) h s l / 56%);
-  --color-feedback-green-500-56: hsl(from var(--color-feedback-green-500) h s l / 56%);
-
-  /* Blue */
-  --color-feedback-blue-100: hsl(212, 100%, 95%);
-  --color-feedback-blue-200: hsl(214, 100%, 86%);
-  --color-feedback-blue-300: hsl(214, 100%, 77%);
-  --color-feedback-blue-400: hsl(214, 89%, 67%);
-  --color-feedback-blue-500: hsl(214, 69%, 50%);
-  --color-feedback-blue-600: hsl(215, 70%, 41%);
-  --color-feedback-blue-700: hsl(215, 71%, 32%);
-  --color-feedback-blue-800: hsl(217, 73%, 23%);
-  --color-feedback-blue-900: hsl(218, 73%, 15%);
-
-  --color-feedback-blue-400-56: hsl(from var(--color-feedback-blue-400) h s l / 56%);
-  --color-feedback-blue-500-56: hsl(from var(--color-feedback-blue-500) h s l / 56%);
-
-  /* Violet */
-  --color-feedback-violet-300: hsl(265, 77%, 65%);
-  --color-feedback-violet-600: 	hsl(268, 75%, 31%);
-
-  --color-link-default: var(--color-brand-blue-600);
-  --color-link-visited-primary: var(--color-feedback-violet-600);
-  --color-link-secondary: var(--color-base-black);
-  --color-link-visited-secondary: var(--color-feedback-violet-600);
-
-  /* ============================================
-   * 2. SEMANTIC/UTILITY TOKENS
-   * Theme-aware variables that map directly to utility classes
-   * These change based on light/dark mode
-   * ============================================ */
-
-  /* Text Colors */
-  /* TODO: These should use our skimmable colors for headings */
-  --text-heading-xl: var(--color-neutral-900);
-  --text-heading-lg: var(--color-neutral-900);
-  --text-heading-md: var(--color-neutral-900);
-  --text-heading-sm: var(--color-neutral-800);
-  --text-heading-xs: var(--color-neutral-800);
-
-  --text-display: var(--color-base-black);
-
-  --text-highlight: var(--color-neutral-900);
-  --text-default: var(--color-neutral-700);
-  --text-muted: var(--color-neutral-900-64);
-  --text-placeholder: var(--color-neutral-900-56);
-  --text-disabled: var(--color-neutral-900-40);
-
-  /* Fixed dark text */
-  --text-highlight-fixed-dark: var(--color-base-black);
-  --text-default-fixed-dark: var(--color-neutral-900);
-  --text-muted-fixed-dark: var(--color-neutral-900-64);
-
-  /* Fixed light text */
-  --text-highlight-fixed-light: var(--color-base-white);
-  --text-default-fixed-light: var(--color-neutral-100);
-  --text-muted-fixed-light: var(--color-neutral-100-64);
-
-  /* Inverse text */
-  --text-highlight-inverse: var(--color-base-white);
-  --text-default-inverse: var(--color-neutral-100);
-  --text-muted-inverse: var(--color-neutral-100-64);
-
-  --text-link-primary: var(--color-brand-blue-600);
-  --text-link-secondary: var(--color-base-black);
-  --text-link-visited: var(--color-feedback-violet-600);
-
-  --text-default-destructive: var(--color-feedback-red-700);
-  --text-link-destructive: var(--color-feedback-red-900);
-
-  --text-default-information: var(--color-feedback-blue-700);
-  --text-link-information: var(--color-feedback-blue-900);
-
-  --text-default-success: var(--color-feedback-green-700);
-  --text-link-success: var(--color-feedback-green-900);
-
-  --text-default-warning: var(--color-feedback-orange-700);
-  --text-link-warning: var(--color-feedback-orange-900);
-
-
-  --text-body: var(--color-neutral-900);
-  --text-body-muted: var(--color-neutral-400);
-
-  /* Warning State */
-  --bg-warning: var(--color-feedback-orange-100);
-  --text-warning: var(--color-feedback-orange-700);
-  --border-warning: var(--color-feedback-orange-300);
-
-
-    /* Link utilities */
-  --underline-link-primary: var(--color-brand-blue-600);
-  --underline-link-secondary: var(--color-base-black);
-  --underline-link-visited: var(--color-feedback-violet-600);
-
-
-  /* ============================================
-   * BORDER TOKENS
-   * ============================================ */
-
-  /* Border utilities - neutral states */
-  --border-neutral-active: var(--color-neutral-600);
-  --border-neutral-hover: var(--color-neutral-500);
-  --border-neutral-default: var(--color-neutral-400);
-  --border-neutral-disabled: var(--color-neutral-400-40);
-  --border-neutral-softest: var(--color-neutral-300);
-  --border-neutral-inset: var(--color-base-white);
-  --border-neutral-alpha: hsla(
-    0,
-    0%,
-    0%,
-    0.2
-  ); /* Black with 20% opacity for light mode */
-
-
-  /* Border Destructive utilities */
-  --border-destructive-highlight: var(--color-feedback-red-600);
-  --border-destructive-default: var(--color-feedback-red-500);
-  --border-destructive-muted: var(--color-feedback-red-500-56);
-  --border-destructive-softest: var(--color-feedback-red-300);
-
-  /* Border Information utilities */
-  --border-information-highlight: var(--color-feedback-blue-600);
-  --border-information-default: var(--color-feedback-blue-500);
-  --border-information-muted: var(--color-feedback-blue-500-56);
-  --border-information-softest: var(--color-feedback-blue-300);
-
-  /* Border Success utilities */
-  --border-success-highlight: var(--color-feedback-green-600);
-  --border-success-default: var(--color-feedback-green-500);
-  --border-success-muted: var(--color-feedback-green-500-56);
-  --border-success-softest: var(--color-feedback-green-300);
-
-  /* Border Warning utilities */
-  --border-warning-highlight: var(--color-feedback-orange-600);
-  --border-warning-default: var(--color-feedback-orange-500);
-  --border-warning-muted: var(--color-feedback-orange-500-56);
-  --border-warning-softest: var(--color-feedback-orange-300);
-
-  /* Border Focus utilities */
-  --border-focus: var(--color-brand-blue-600);
-
-
-  /* ============================================
-   * FILLS
-   * ============================================ */
-
-   /* Neutrals */
-   --fill-neutral-highlight: var(--color-base-black);
-   --fill-neutral-active: var(--color-neutral-900);
-   --fill-neutral-default: var(--color-neutral-800);
-   --fill-neutral-muted: var(--color-neutral-800-56);
-
-   /* Fixed dark fill */
-   --fill-neutral-highlight-fixed-dark: var(--color-base-black);
-   --fill-neutral-default-fixed-dark: var(--color-neutral-800);
-   --fill-neutral-muted-fixed-dark: var(--color-neutral-900-56);
-
-   /* Fixed light fill */
-   --fill-neutral-highlight-fixed-light: var(--color-base-white);
-   --fill-neutral-default-fixed-light: var(--color-neutral-100);
-   --fill-neutral-muted-fixed-light: var(--color-neutral-100-56);
-
-   /* Inverse fill */
-    --fill-neutral-highlight-inverse: var(--color-base-white);
-    --fill-neutral-default-inverse: var(--color-neutral-100);
-    --fill-neutral-muted-inverse: var(--color-neutral-100-56);
-
-   /* Links */
-   --fill-link-primary: var(--color-brand-blue-600);
-   --fill-link-secondary: var(--color-base-black);
-   --fill-link-visited: var(--color-feedback-violet-600);
-
-   /* Destructive */
-   --fill-destructive-highlight: var(--color-feedback-red-600);
-   --fill-destructive-default: var(--color-feedback-red-500);
-   --fill-destructive-muted: var(--color-feedback-red-600-56);
-
-   /* Information */
-   --fill-information-highlight: var(--color-feedback-blue-600);
-   --fill-information-default: var(--color-feedback-blue-500);
-   --fill-information-muted: var(--color-feedback-blue-500-56);
-
-   /* Success */
-   --fill-success-highlight: var(--color-feedback-green-600);
-   --fill-success-default: var(--color-feedback-green-500);
-   --fill-success-muted: var(--color-feedback-green-500-56);
-
-   /* Warning */
-   --fill-warning-highlight: var(--color-feedback-orange-600);
-   --fill-warning-default: var(--color-feedback-orange-500);
-   --fill-warning-muted: var(--color-feedback-orange-500-56);
-
-   /* ============================================
-   * Strokes
-   * ============================================ */
-
-   /* Neutrals */
-   --stroke-neutral-highlight: var(--color-base-black);
-   --stroke-neutral-active: var(--color-neutral-900);
-   --stroke-neutral-default: var(--color-neutral-800);
-   --stroke-neutral-muted: var(--color-neutral-800-56);
-
-   /* Fixed dark stroke */
-   --stroke-neutral-highlight-fixed-dark: var(--color-base-black);
-   --stroke-neutral-default-fixed-dark: var(--color-neutral-800);
-   --stroke-neutral-muted-fixed-dark: var(--color-neutral-900-56);
-
-   /* Fixed light stroke */
-   --stroke-neutral-highlight-fixed-light: var(--color-base-white);
-   --stroke-neutral-default-fixed-light: var(--color-neutral-100);
-   --stroke-neutral-muted-fixed-light: var(--color-neutral-100-56);
-
-   /* Inverse stroke */
-   --stroke-neutral-highlight-inverse: var(--color-base-white);
-   --stroke-neutral-default-inverse: var(--color-neutral-100);
-   --stroke-neutral-muted-inverse: var(--color-neutral-100-56);
-
-   /* Links */
-   --stroke-link-primary: var(--color-brand-blue-600);
-   --stroke-link-secondary: var(--color-base-black);
-   --stroke-link-visited: var(--color-feedback-violet-600);
-
-   /* Destructive */
-   --stroke-destructive-highlight: var(--color-feedback-red-600);
-   --stroke-destructive-default: var(--color-feedback-red-500);
-   --stroke-destructive-muted: var(--color-feedback-red-600-56);
-
-   /* Information */
-   --stroke-information-highlight: var(--color-feedback-blue-600);
-   --stroke-information-default: var(--color-feedback-blue-500);
-   --stroke-information-muted: var(--color-feedback-blue-500-56);
-
-   /* Success */
-   --stroke-success-highlight: var(--color-feedback-green-600);
-   --stroke-success-default: var(--color-feedback-green-500);
-   --stroke-success-muted: var(--color-feedback-green-500-56);
-
-   /* Warning */
-   --stroke-warning-highlight: var(--color-feedback-orange-600);
-   --stroke-warning-default: var(--color-feedback-orange-500);
-   --stroke-warning-muted: var(--color-feedback-orange-500-56);
-
-  /* ============================================
-   * BACKGROUNDS
-   * ============================================ */
-   --bg-surface-primary-default: var(--color-base-white);
-   --bg-surface-secondary-default: var(--color-neutral-100);
-   --bg-surface-tertiary-default: var(--color-neutral-200);
-   --bg-surface-primary-inverse: var(--color-base-black);
-   --bg-surface-secondary-inverse: var(--color-neutral-900);
-   --bg-surface-tertiary-inverse: var(--color-neutral-800);
-
-   /* State */
-   --bg-highlight: var(--color-neutral-300);
-   --bg-active: var(--color-neutral-200);
-   --bg-default: var(--color-neutral-100);
-   --bg-muted: var(--color-neutral-100-56);
-   --bg-inset: var(--color-base-white);
-
-   /* Light background in dark mode */
-   --bg-surface-primary-fixed-light: var(--color-base-white);
-   --bg-surface-secondary-fixed-light: var(--color-neutral-100);
-   --bg-surface-tertiary-fixed-light: var(--color-neutral-200);
-
-   /* Dark background in light mode */
-   --bg-surface-primary-fixed-dark: var(--color-base-black);
-   --bg-surface-secondary-fixed-dark: var(--color-neutral-900);
-   --bg-surface-tertiary-fixed-dark: var(--color-neutral-800);
-
-   /* Destructive */
-   --bg-destructive-highlight: var(--color-feedback-red-600);
-   --bg-destructive-default: var(--color-feedback-red-500);
-   --bg-destructive-muted: var(--color-feedback-red-500-56);
-   --bg-destructive-softest: var(--color-feedback-red-100);
-
-   /* Information */
-   --bg-information-highlight: var(--color-feedback-blue-600);
-   --bg-information-default: var(--color-feedback-blue-500);
-   --bg-information-muted: var(--color-feedback-blue-500-56);
-   --bg-information-softest: var(--color-feedback-blue-100);
-
-   /* Success */
-   --bg-success-highlight: var(--color-feedback-green-600);
-   --bg-success-default: var(--color-feedback-green-500);
-   --bg-success-muted: var(--color-feedback-green-500-56);
-   --bg-success-softest: var(--color-feedback-green-100);
-
-   /* Warning */
-   --bg-warning-highlight: var(--color-feedback-orange-600);
-   --bg-warning-default: var(--color-feedback-orange-500);
-   --bg-warning-muted: var(--color-feedback-orange-500-56);
-   --bg-warning-softest: var(--color-feedback-orange-100);
-
-
-
-
-  /* ============================================
-   * 3. COMPONENT TOKENS
-   * Higher-level semantic tokens for specific use cases
-   * ============================================ */
-
-  /* Border Radius */
-  --radius: 0.625rem;
-  /* ============================================
-   * 4. DEPRECATED TOKENS - SHADCN COMPATIBILITY
-   * These will be removed in future versions
-   * DO NOT use in new code
-   * ============================================ */
-
-  --background-pure: var(--color-base-white);
-  --background: var(--color-neutral-100);
-  --foreground: var(--color-neutral-900);
-  --card: var(--color-base-white);
-  --card-foreground: var(--color-neutral-900);
-  --popover: var(--color-base-white);
-  --popover-foreground: var(--color-neutral-900);
-  --primary: var(--color-base-black);
-  --primary-foreground: var(--color-base-white);
-  --secondary: var(--color-neutral-100);
-  --secondary-foreground: var(--color-neutral-900);
-  --muted: var(--color-neutral-200);
-  --muted-foreground: var(--color-neutral-900-64);
-  --accent: var(--color-neutral-200);
-  --accent-foreground: var(--color-neutral-900);
-  --destructive: var(
-    --color-feedback-red-700
-  ); /* Note: conflicts with semantic token above */
-  --border: var(--color-neutral-300);
-  --input: var(--color-neutral-400);
-  --ring: var(--color-brand-blue-600);
-  --chart-1: var(--color-brand-red-600);
-  --chart-2: var(--color-brand-green-600);
-  --chart-3: var(--color-brand-red-600);
-  --chart-4: var(--color-brand-blue-600);
-  --chart-5: var(--color-brand-green-600);
-  --sidebar: var(--color-neutral-100);
-  --sidebar-foreground: var(--color-neutral-900);
-  --sidebar-primary: var(--color-base-black);
-  --sidebar-primary-foreground: var(--color-neutral-300);
-  --sidebar-accent: var(--color-neutral-300);
-  --sidebar-accent-foreground: var(--color-neutral-900);
-  --sidebar-border: var(--color-neutral-300);
-  --sidebar-ring: var(--color-brand-blue-600);
-
-  /* Feedback States */
-  --success: var(--color-feedback-green-100);
-  --success-foreground: var(--color-feedback-green-700);
-  --warning: var(--color-feedback-orange-100);
-  --warning-foreground: var(--color-feedback-orange-700);
-  --info: var(--color-info-100);
-  --info-foreground: var(--color-info-700);
-  /* This is a dupe of a shadcn token, may need to rename*/
-  --destructive: var(--color-feedback-red-700);
-  --destructive-foreground: var(--color-feedback-red-100);
-  --feature: var(--color-info-100);
-  --feature-foreground: var(--color-info-700);
-
-  /* UI Elements */
-  --shadow: hsl(0 0% 50%);
-
-  /* Custom Scrollbar */
-  --sb-size: 0.5rem;
-  --sb-track-color: var(--color-background);
-  --sb-thumb-color: var(--color-background);
-  --sb-track-border: var(--color-neutral-300);
-
-  /* Score Colors */
-  --score-low: var(--color-destructive-500);
-  --score-mid: var(--color-feedback-orange-500);
-  --score-high: var(--color-feedback-green-500);
-  --score-track: var(--color-neutral-700);
-
-  /* Animation Easing Functions */
-  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-
-  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
-  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-
-  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-}
-
-/* ============================================
- * BASE ELEMENT STYLES
- * Default styles for HTML elements
- * ============================================ */
-
-/*
- * Tailwind v4 Compatibility Layer
- * The default border color has changed to `currentColor` in Tailwind CSS v4.
- * These styles maintain v3 behavior until we can audit all border usage.
- */
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    @apply border-neutral-softest;
-  }
-
-  button:not(:disabled),
-  [role='button']:not(:disabled) {
-    cursor: pointer;
-  }
-
-  body {
-    @apply bg-surface-primary-default text-default;
-  }
-}
-
-:root.dark {
-  /* ============================================
-   * DARK MODE OVERRIDES
-   * Only define values that change in dark mode
-   * ============================================ */
-
-  --color-link-default: var(--color-brand-blue-300);
-  --color-link-visited-primary: var(--color-feedback-violet-300);
-  --color-link-secondary: var(--color-base-white);
-  --color-link-visited-secondary: var(--color-feedback-violet-300);
-
-  /* ============================================
-   * 2. SEMANTIC/UTILITY TOKENS (Dark Mode)
-   * ============================================ */
-
-  /* Text Colors */
-  --text-heading-xl: var(--color-neutral-100);
-  --text-heading-lg: var(--color-neutral-100);
-  --text-heading-md: var(--color-neutral-100);
-  --text-heading-sm: var(--color-neutral-200);
-  --text-heading-xs: var(--color-neutral-200);
-
-  --text-display: var(--color-base-white);
-
-  --text-highlight: var(--color-neutral-100);
-  --text-default: var(--color-neutral-300);
-  --text-muted: var(--color-neutral-100-64);
-  --text-placeholder: var(--color-neutral-100-56);
-  --text-disabled: var(--color-neutral-100-40);
-
-  /* Inverse text */
-  --text-highlight-inverse: var(--color-base-black);
-  --text-default-inverse: var(--color-neutral-900);
-  --text-muted-inverse: var(--color-neutral-900-64);
-
-  --text-link-primary: var(--color-brand-blue-300);
-  --text-link-secondary: var(--color-base-white);
-  --text-link-visited: var(--color-feedback-violet-300);
-
-  --text-default-destructive: var(--color-feedback-red-300);
-  --text-link-destructive: var(--color-feedback-red-100);
-
-  --text-default-information: var(--color-feedback-blue-300);
-  --text-link-information: var(--color-feedback-blue-100);
-
-  --text-default-success: var(--color-feedback-green-300);
-  --text-link-success: var(--color-feedback-green-100);
-
-  --text-default-warning: var(--color-feedback-orange-300);
-  --text-link-warning: var(--color-feedback-orange-100);
-
-  --text-body: var(--color-neutral-200);
-  --text-body-muted: var(--color-neutral-600);
-
-  /* Warning State */
-  --bg-warning: var(--color-feedback-orange-900);
-  --text-warning: var(--color-feedback-orange-300);
-  --border-warning: var(--color-feedback-orange-700);
-
-    /* Link utilities (dark mode) */
-  --underline-link-primary: var(--color-brand-blue-300);
-  --underline-link-secondary: var(--color-base-white);
-  --underline-link-visited: var(--color-feedback-violet-300);
-
-  /* ============================================
-   * BORDER TOKENS
-   * ============================================ */
-
-  /* Border utilities - neutral states (dark mode) */
-  --border-neutral-active: var(--color-neutral-400);
-  --border-neutral-hover: var(--color-neutral-500);
-  --border-neutral-default: var(--color-neutral-600);
-  --border-neutral-disabled: var(--color-neutral-600-40);
-  --border-neutral-softest: var(--color-neutral-700);
-  --border-neutral-inset: var(--color-base-black);
-  --border-neutral-alpha: hsla(
-    255,
-    255%,
-    255%,
-    0.2
-  ); /* White with 20% opacity */
-
-  /* Border destructive utilities */
-  --border-destructive-highlight: var(--color-feedback-red-400);
-  --border-destructive-default: var(--color-feedback-red-500);
-  --border-destructive-muted: var(--color-feedback-red-500-56);
-  --border-destructive-softest: var(--color-feedback-red-700);
-
-  /* Border Information utilities */
-  --border-information-highlight: var(--color-feedback-blue-400);
-  --border-information-default: var(--color-feedback-blue-500);
-  --border-information-muted: var(--color-feedback-blue-500-56);
-  --border-information-softest: var(--color-feedback-blue-700);
-
-  /* Border Success utilities */
-  --border-success-highlight: var(--color-feedback-green-400);
-  --border-success-default: var(--color-feedback-green-500);
-  --border-success-muted: var(--color-feedback-green-500-56);
-  --border-success-softest: var(--color-feedback-green-700);
-
-  /* Border Warning utilities */
-  --border-warning-highlight: var(--color-feedback-orange-400);
-  --border-warning-default: var(--color-feedback-orange-500);
-  --border-warning-muted: var(--color-feedback-orange-500-56);
-  --border-warning-softest: var(--color-feedback-orange-700);
-
-    /* Border Focus utilities */
-  --border-focus: var(--color-brand-blue-300);
-
-
-   /* ============================================
-   * FILLS
-   * ============================================ */
-
-   /* Neutrals */
-  --fill-neutral-highlight: var(--color-base-white);
-  --fill-neutral-active: var(--color-neutral-100);
-  --fill-neutral-default: var(--color-neutral-200);
-  --fill-neutral-muted: var(--color-neutral-200-56);
-
-  /* Fixed dark fill */
-
-   /* Fixed light fill */
-
-   /* Inverse fill */
-    --fill-neutral-highlight-inverse: var(--color-base-black);
-    --fill-neutral-default-inverse: var(--color-neutral-900);
-    --fill-neutral-muted-inverse: var(--color-neutral-900-56);
-
-   /* Links */
-   --fill-link-primary: var(--color-brand-blue-300);
-   --fill-link-secondary: var(--color-base-white);
-   --fill-link-visited: var(--color-feedback-violet-300);
-
-    /* Destructive */
-   --fill-destructive-highlight: var(--color-feedback-red-300);
-   --fill-destructive-default: var(--color-feedback-red-400);
-   --fill-destructive-muted: var(--color-feedback-red-400-56);
-
-   /* Information */
-   --fill-information-highlight: var(--color-feedback-blue-300);
-   --fill-information-default: var(--color-feedback-blue-400);
-   --fill-information-muted: var(--color-feedback-blue-400-56);
-
-   /* Success */
-   --fill-success-highlight: var(--color-feedback-green-300);
-   --fill-success-default: var(--color-feedback-green-400);
-   --fill-success-muted: var(--color-feedback-green-400-56);
-
-   /* Warning */
-   --fill-warning-highlight: var(--color-feedback-orange-300);
-   --fill-warning-default: var(--color-feedback-orange-400);
-   --fill-warning-muted: var(--color-feedback-orange-400-56);
-
-   /* ============================================
-   * Strokes
-   * ============================================ */
-
-   /* Neutrals */
-  --stroke-neutral-highlight: var(--color-base-white);
-  --stroke-neutral-active: var(--color-neutral-100);
-  --stroke-neutral-default: var(--color-neutral-200);
-  --stroke-neutral-muted: var(--color-neutral-200-56);
-
-  /* Fixed dark stroke*/
-
-   /* Fixed light stroke */
-
-   /* Inverse stroke */
-   --stroke-neutral-highlight-inverse: var(--color-base-black);
-   --stroke-neutral-default-inverse: var(--color-neutral-900);
-   --stroke-neutral-muted-inverse: var(--color-neutral-900-56);
-
-   /* Links */
-   --stroke-link-primary: var(--color-brand-blue-300);
-   --stroke-link-secondary: var(--color-base-white);
-   --stroke-link-visited: var(--color-feedback-violet-300);
-
-    /* Destructive */
-   --stroke-destructive-highlight: var(--color-feedback-red-300);
-   --stroke-destructive-default: var(--color-feedback-red-400);
-   --stroke-destructive-muted: var(--color-feedback-red-400-56);
-
-   /* Information */
-   --stroke-information-highlight: var(--color-feedback-blue-300);
-   --stroke-information-default: var(--color-feedback-blue-400);
-   --stroke-information-muted: var(--color-feedback-blue-400-56);
-
-   /* Success */
-   --stroke-success-highlight: var(--color-feedback-green-300);
-   --stroke-success-default: var(--color-feedback-green-400);
-   --stroke-success-muted: var(--color-feedback-green-400-56);
-
-   /* Warning */
-   --stroke-warning-highlight: var(--color-feedback-orange-300);
-   --stroke-warning-default: var(--color-feedback-orange-400);
-   --stroke-warning-muted: var(--color-feedback-orange-400-56);
-
-   /* ============================================
-   * BACKGROUNDS
-   * ============================================ */
-   --bg-surface-primary-default: var(--color-base-black);
-   --bg-surface-secondary-default: var(--color-neutral-900);
-   --bg-surface-tertiary-default: var(--color-neutral-800);
-   --bg-surface-primary-inverse: var(--color-base-white);
-   --bg-surface-secondary-inverse: var(--color-neutral-100);
-   --bg-surface-tertiary-inverse: var(--color-neutral-200);
-
-   /* State */
-   --bg-highlight: var(--color-neutral-700);
-   --bg-active: var(--color-neutral-800);
-   --bg-default: var(--color-neutral-900);
-   --bg-muted: var(--color-neutral-900-56);
-   --bg-inset: var(--color-base-black);
-
-   /* Light background in dark mode */
-
-   /* Dark background in light mode */
-
-   /* Destructive */
-   --bg-destructive-highlight: var(--color-feedback-red-400);
-   --bg-destructive-default: var(--color-feedback-red-500);
-   --bg-destructive-muted: var(--color-feedback-red-500-56);
-   --bg-destructive-softest: var(--color-feedback-red-900);
-
-   /* Information */
-   --bg-information-highlight: var(--color-feedback-blue-400);
-   --bg-information-default: var(--color-feedback-blue-500);
-   --bg-information-muted: var(--color-feedback-blue-500-56);
-   --bg-information-softest: var(--color-feedback-blue-900);
-
-   /* Success */
-   --bg-success-highlight: var(--color-feedback-green-400);
-   --bg-success-default: var(--color-feedback-green-500);
-   --bg-success-muted: var(--color-feedback-green-500-56);
-   --bg-success-softest: var(--color-feedback-green-900);
-
-   /* Warning */
-   --bg-warning-highlight: var(--color-feedback-orange-400);
-   --bg-warning-default: var(--color-feedback-orange-500);
-   --bg-warning-muted: var(--color-feedback-orange-500-56);
-   --bg-warning-softest: var(--color-feedback-orange-900);
-
-
-  /* ============================================
-   * 3. COMPONENT TOKENS (Dark Mode)
-   * ============================================ */
-
-  /* Feedback States */
-  --success: var(--color-feedback-green-500);
-  --success-foreground: var(--color-feedback-green-100);
-  --warning: var(--color-feedback-orange-500);
-  --warning-foreground: var(--color-feedback-orange-100);
-  --info: var(--color-info-500);
-  --info-foreground: var(--color-info-100);
-  --destructive: var(--color-feedback-red-500);
-  --destructive-foreground: var(--color-feedback-red-100);
-  --feature: var(--color-info-500);
-  --feature-foreground: var(--color-info-100);
-
-  /* Score Colors */
-  --score-low: hsl(350 89% 60%);
-  --score-mid: hsl(38 92% 50%);
-  --score-high: hsl(160 84% 39%);
-  --score-track: hsl(48 4% 28%);
-
-  /* Custom Scrollbar */
-  --sb-track-color: var(--color-neutral-800);
-  --sb-thumb-color: var(--color-neutral-900);
-  --sb-track-border: var(--color-neutral-800);
-
-  /* Misc */
-  --header-border: 0 0% 14.9%;
-
-  /* ============================================
-   * 4. DEPRECATED TOKENS - SHADCN (Dark Mode)
-   * ============================================ */
-
-  --background-pure: var(--color-base-black);
-  --background: var(--color-base-black);
-  --foreground: var(--color-neutral-300);
-  --card: var(--color-neutral-900);
-  --card-foreground: var(--color-neutral-300);
-  --popover: var(--color-base-black);
-  --popover-foreground: var(--color-neutral-100);
-  --primary: var(--color-base-white);
-  --primary-foreground: var(--color-base-black);
-  --secondary: var(--color-neutral-900);
-  --secondary-foreground: var(--color-neutral-300);
-  --muted: var(--color-neutral-900);
-  --muted-foreground: var(--color-neutral-100-64);
-  --accent: var(--color-neutral-800);
-  --accent-foreground: var(--color-base-white);
-  --destructive: var(
-    --color-feedback-red-500
-  ); /* Note: conflicts with semantic token above */
-  --border: var(--color-neutral-700);
-  --input: var(--color-neutral-700);
-  --ring: var(--color-brand-blue-600);
-  --chart-1: var(--color-brand-red-600);
-  --chart-2: var(--color-brand-green-600);
-  --chart-3: var(--color-brand-red-600);
-  --chart-4: var(--color-brand-blue-600);
-  --chart-5: var(--color-brand-green-600);
-  --sidebar: var(--color-neutral-900);
-  --sidebar-foreground: var(--color-base-white);
-  --sidebar-primary: var(--color-brand-red-600);
-  --sidebar-primary-foreground: var(--color-neutral-300);
-  --sidebar-accent: var(--color-neutral-700);
-  --sidebar-accent-foreground: var(--color-base-white);
-  --sidebar-border: var(--color-neutral-700);
-  --sidebar-ring: var(--color-brand-blue-600);
-}