/**
 * NOMON Design System
 * Centralized design tokens for fonts, colors, spacing, and other shared variables
 * Import this file first in all HTML pages to ensure consistency
 *
 * ITCSS ARCHITECTURE (Layers 1–4 of 8):
 * This file owns the first four layers of the project's ITCSS structure.
 * See docs/DESIGN_SYSTEM.md for the full 8-layer model.
 *
 * 1. SETTINGS    - @property registrations, CSS custom properties
 * 2. GENERIC     - (reserved — resets live in base-page.css / page CSS)
 * 3. COMPONENTS  - Shared reusable components (.neu-card, .credit)
 * 4. UTILITIES   - Atomic helper classes with !important (.u-*)
 *
 * SPACING SYSTEM:
 * - Base unit: 0.25rem (4px at default browser settings)
 * - Scale: 3xs(2px), 2xs(4px), xs(8px), sm(12px), md(16px), lg(24px), xl(32px), 2xl(48px), 3xl(64px), 4xl(96px)
 * - Use semantic aliases for component-specific spacing (--gap-*, --pad-*)
 *
 * FONT SIZE SYSTEM:
 * - Scale: 2xs, xs, sm, base, md, lg, xl, 2xl, 3xl, 4xl, 5xl
 * - Use rem for scalability
 */

/* ==========================================================================
   SETTINGS LAYER - Design Tokens & Custom Properties
   Lowest specificity, foundational values
   ========================================================================== */

/* ========================================
   @PROPERTY REGISTRATIONS
   Type-safe custom properties for animation support
   Baseline browser support as of July 2024
   ======================================== */

@property --color-blue-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #5665e3;
}

@property --color-red-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #ff4d44;
}

@property --color-purple-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #f476ff;
}

@property --accent-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #f476ff;
}

:root {
  /* ========================================
     COLOR SCHEME
     ======================================== */
  color-scheme: dark;

  /* ========================================
     CORE COLORS - Shared across all pages
     ======================================== */

  /* Primary Colors */
  --color-blue-primary: #5665e3;
  --color-blue-secondary: #263fdf;
  --color-red-primary: #ff4d44;
  --color-red-secondary: #e44234;

  /* Purple/Accent */
  --color-purple-primary: #f476ff;
  --color-purple-secondary: #7f6fff;

  /* Deep Violet - Cassette body and ambient glow */
  --color-cassette-deep: #3a2469;
  --color-cassette-glow: #5a3a8a;

  /* Smoke/Muted Colors */
  --color-smoke-lavender: #c7aeea;
  --color-smoke-periwinkle: #8f7cd1;
  --color-smoke-rose: #dfa2c3;

  /* Neutral Colors */
  --color-text-primary: #f7f7ff;
  --color-text-secondary: #f2f7ff;
  --color-muted: #9da3c2;
  --color-muted-alt: #a2a4b8;

  /* Background Colors */
  --color-bg-dark: #000000;
  --color-bg-panel: #050505;
  --color-bg-card: rgba(9, 11, 22, 0.9);
  --color-bg-elevated: #0b121d;

  /* Gray Scale (dark to light) */
  --color-gray-950: #0d0e15;
  --color-gray-900: #121212;
  --color-gray-850: #161616;
  --color-gray-800: #1a1a1a;
  --color-gray-750: #1a1c25;
  --color-gray-700: #1c1d2a;
  --color-gray-650: #22252f;
  --color-gray-600: #222430;
  --color-gray-550: #232536;
  --color-gray-500: #2a2a2a;
  --color-gray-450: #2e2740;
  --color-gray-400: #333333;
  --color-gray-350: #3a3d4a;
  --color-gray-300: #444444;
  --color-gray-200: #f0f0f0;
  --color-gray-100: #fafafa;

  /* Utility Colors */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Semantic State Colors */
  --color-success: #4ade80;
  --color-success-muted: rgba(74, 222, 128, 0.2);
  --color-warning: #fbbf24;

  /* Interactive State Colors (hover variants) */
  --color-blue-hover: #6a77e8;
  --color-red-hover: #ff5a50;
  --color-purple-hover: #f98fff;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-title: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, sans-serif;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes - rem based for scalability
     * Scale: Minor Third (1.2) with adjustments for readability
     * Base: 1rem = 16px default
     */
  --text-2xs: 0.625rem;
  /* 10px - Fine print */
  --text-xs: 0.75rem;
  /* 12px - Labels, captions */
  --text-sm: 0.875rem;
  /* 14px - Secondary text */
  --text-base: 1rem;
  /* 16px - Body text */
  --text-md: 1.125rem;
  /* 18px - Emphasized body */
  --text-lg: 1.25rem;
  /* 20px - Subheadings */
  --text-xl: 1.5rem;
  /* 24px - Section headings */
  --text-2xl: 1.875rem;
  /* 30px - Page headings */
  --text-3xl: 2.25rem;
  /* 36px - Hero text */
  --text-4xl: 3rem;
  /* 48px - Display */
  --text-5xl: 4rem;
  /* 64px - Large display */

  /* ========================================
     SPACING - Core Scale
     Using 4px (0.25rem) as the base unit
     ======================================== */

  --space-0: 0;
  --space-px: 1px;
  --space-3xs: 0.125rem;
  /* 2px */
  --space-2xs: 0.25rem;
  /* 4px */
  --space-xs: 0.5rem;
  /* 8px */
  --space-sm: 0.75rem;
  /* 12px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.5rem;
  /* 24px */
  --space-xl: 2rem;
  /* 32px */
  --space-2xl: 3rem;
  /* 48px */
  --space-3xl: 4rem;
  /* 64px */
  --space-4xl: 6rem;
  /* 96px */

  /* Legacy aliases - for backward compatibility */
  --spacing-xs: var(--space-2xs);
  --spacing-sm: var(--space-xs);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --spacing-2xl: var(--space-2xl);

  /* ========================================
     COMPONENT SPACING - Semantic Tokens
     These make it clear what the spacing is for
     ======================================== */

  /* Gaps (for flex/grid layouts) */
  --gap-xs: var(--space-xs);
  /* 8px - Tight grouping */
  --gap-sm: var(--space-sm);
  /* 12px - Related items */
  --gap-md: var(--space-md);
  /* 16px - Standard gap */
  --gap-lg: var(--space-lg);
  /* 24px - Section separation */
  --gap-xl: var(--space-xl);
  /* 32px - Major sections */

  /* Padding (internal spacing) */
  --pad-2xs: var(--space-2xs);
  /* 4px - Compact buttons */
  --pad-xs: var(--space-xs);
  /* 8px - Tight containers */
  --pad-sm: var(--space-sm);
  /* 12px - Small components */
  --pad-md: var(--space-md);
  /* 16px - Standard padding */
  --pad-lg: var(--space-lg);
  /* 24px - Comfortable padding */
  --pad-xl: var(--space-xl);
  /* 32px - Spacious padding */
  --pad-2xl: var(--space-2xl);
  /* 48px - Extra spacious padding */

  /* Margins (external spacing) */
  --margin-xs: var(--space-xs);
  /* 8px */
  --margin-sm: var(--space-sm);
  /* 12px */
  --margin-md: var(--space-md);
  /* 16px */
  --margin-lg: var(--space-lg);
  /* 24px */
  --margin-xl: var(--space-xl);
  /* 32px */
  --margin-2xl: var(--space-2xl);
  /* 48px */

  /* ========================================
     BORDER RADIUS - rem based for scalability
     ======================================== */

  --radius-none: 0;
  --radius-xs: 0.25rem;
  /* 4px */
  --radius-sm: 0.5rem;
  /* 8px */
  --radius-md: 0.625rem;
  /* 10px */
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-2xl: 1.5rem;
  /* 24px */
  --radius-3xl: 2rem;
  /* 32px */
  --radius-full: 9999px;
  /* Pill shape */

  /* ========================================
     EFFECTS
     ======================================== */

  /* Shadows - using em for relative scaling within components */
  --shadow-sm: 0 0.0625em 0.125em rgba(0, 0, 0, 0.5);
  --shadow-md: 0 0.25em 0.375em rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 0.625em 0.9375em rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 1.25em 1.5625em rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 1.5625em 3.125em rgba(0, 0, 0, 0.6);

  /* Light-surface shadows - px-based, for light backgrounds */
  --shadow-light-sm: 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-light-md: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-light-lg: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-light-xl: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* ========================================
     NEUMORPHIC DESIGN SYSTEM
     Dark neumorphism with accent glow support
     ======================================== */

  /* Neumorphic Base Colors */
  --neu-bg: #1e1e2e;
  --neu-bg-dark: #141420;
  --neu-surface: #252536;
  --neu-surface-raised: #2a2a3c;

  /* Neumorphic Shadow Colors */
  --neu-shadow-dark: rgba(0, 0, 0, 0.5);
  --neu-shadow-darker: rgba(0, 0, 0, 0.7);
  --neu-shadow-light: rgba(60, 60, 90, 0.25);
  --neu-shadow-lighter: rgba(70, 70, 100, 0.15);

  /* Neumorphic Shadow Presets - Raised elements */
  --neu-raised-sm: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
  --neu-raised: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
  --neu-raised-lg: 10px 10px 20px var(--neu-shadow-dark), -10px -10px 20px var(--neu-shadow-light);

  /* Neumorphic Shadow Presets - Inset elements */
  --neu-inset-sm:
    inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
  --neu-inset:
    inset 4px 4px 4px var(--neu-shadow-dark), inset -4px -4px 4px var(--neu-shadow-light);
  --neu-inset-lg:
    inset 6px 6px 12px var(--neu-shadow-darker), inset -6px -6px 12px var(--neu-shadow-light);
  --neu-inset-deep:
    inset 8px 8px 16px var(--neu-shadow-darker), inset -8px -8px 16px var(--neu-shadow-lighter);

  /* Neumorphic with Accent Glow (for active/playing states) */
  --neu-glow-purple:
    0 0 20px var(--glow-purple), 6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
  --neu-glow-purple-intense:
    0 0 30px var(--glow-purple-lg), 0 0 60px var(--glow-purple-sm),
    6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);

  /* Neumorphic Pressed State (button active) */
  --neu-pressed:
    inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);

  /* Neumorphic Edge Highlights - blends smoothly at corners */
  --neu-edge-highlight: inset 1px 1px 0 rgba(255, 255, 255, 0.07);
  --neu-edge-highlight-subtle: inset 1px 1px 0 rgba(255, 255, 255, 0.04);

  /* Glow Effects - derived from base colors using color-mix() */
  --glow-purple: color-mix(in srgb, var(--color-purple-primary) 40%, transparent);
  --glow-purple-subtle: color-mix(in srgb, var(--color-purple-primary) 15%, transparent);
  --glow-purple-intense: color-mix(in srgb, var(--color-purple-primary) 45%, transparent);
  --glow-blue: color-mix(in srgb, var(--color-blue-primary) 40%, transparent);
  --glow-red: color-mix(in srgb, var(--color-red-primary) 40%, transparent);

  /* Purple glow opacity variants */
  --glow-purple-xs: color-mix(in srgb, var(--color-purple-primary) 10%, transparent);
  --glow-purple-sm: color-mix(in srgb, var(--color-purple-primary) 20%, transparent);
  --glow-purple-md: color-mix(in srgb, var(--color-purple-primary) 30%, transparent);
  --glow-purple-lg: color-mix(in srgb, var(--color-purple-primary) 50%, transparent);
  --glow-purple-xl: color-mix(in srgb, var(--color-purple-primary) 60%, transparent);

  /* Blue glow variants */
  --glow-blue-sm: color-mix(in srgb, var(--color-blue-primary) 30%, transparent);
  --glow-blue-lg: color-mix(in srgb, var(--color-blue-primary) 50%, transparent);

  /* Red glow variants */
  --glow-red-sm: color-mix(in srgb, var(--color-red-primary) 30%, transparent);
  --glow-red-lg: color-mix(in srgb, var(--color-red-primary) 50%, transparent);

  /* Blue/Red glow - extra-small (8%) for subtle ambient glows */
  --glow-blue-xs: color-mix(in srgb, var(--color-blue-primary) 8%, transparent);
  --glow-red-xs: color-mix(in srgb, var(--color-red-primary) 8%, transparent);

  /* Blue/Red glow - subtle (15%) for hover ambient glows */
  --glow-blue-subtle: color-mix(in srgb, var(--color-blue-primary) 15%, transparent);
  --glow-red-subtle: color-mix(in srgb, var(--color-red-primary) 15%, transparent);

  /* Blue/Red glow - medium (20%) for banner aura */
  --glow-blue-md: color-mix(in srgb, var(--color-blue-primary) 20%, transparent);
  --glow-red-md: color-mix(in srgb, var(--color-red-primary) 20%, transparent);

  /* Success glow */
  --glow-success: color-mix(in srgb, var(--color-success) 40%, transparent);

  /* Cassette ambient glow - derived from purple-secondary (violet) */
  --glow-cassette-ambient: color-mix(in srgb, var(--color-purple-secondary) 25%, transparent);
  --glow-cassette-ambient-soft: color-mix(in srgb, var(--color-purple-secondary) 15%, transparent);
  --glow-cassette-ambient-strong: color-mix(
    in srgb,
    var(--color-purple-secondary) 35%,
    transparent
  );

  /* Cassette playing glow - shifts toward purple-primary (magenta) */
  --glow-cassette-playing: color-mix(in srgb, var(--color-purple-primary) 35%, transparent);
  --glow-cassette-playing-soft: color-mix(in srgb, var(--color-purple-primary) 20%, transparent);
  --glow-cassette-playing-strong: color-mix(in srgb, var(--color-purple-primary) 50%, transparent);

  /* Glass Effects */
  --glass-dark: rgba(10, 8, 15, 0.4);
  --glass-border-purple: var(--glow-purple-intense);
  --glass-window: rgba(10, 8, 18, 0.88);
  --glass-window-highlight: rgba(120, 100, 160, 0.08);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 5;
  --z-overlay: 10;
  --z-modal: 100;
  --z-tooltip: 1000;

  /* ========================================
     TRANSITIONS
     ======================================== */

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.35s;
  --duration-slower: 0.4s;

  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-base: var(--duration-base) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-default);
  --transition-slower: var(--duration-slower) var(--ease-default);

  /* ========================================
     BORDERS
     ======================================== */

  --border-width-thin: 1px;
  --border-width-base: 2px;
  --border-width-thick: 3px;

  /* Common border styles */
  --border-subtle: var(--border-width-thin) solid rgba(255, 255, 255, 0.08);
  --border-light: var(--border-width-thin) solid rgba(255, 255, 255, 0.12);
  --border-medium: var(--border-width-thin) solid rgba(255, 255, 255, 0.2);

  /* ========================================
     LAYOUT
     ======================================== */

  /* Max Widths */
  --max-width-content: 68.75rem;
  /* 1100px - Main content area */
  --max-width-narrow: 36.25rem;
  /* 580px - Hero text, narrow content */
  --max-width-wide: 80rem;
  /* 1280px - Wide layouts */

  /* ========================================
     BREAKPOINTS
     For use with @media and @container queries
     ======================================== */

  /* Media Query Breakpoints (viewport-based) */
  --bp-sm: 40rem;
  /* 640px - Mobile landscape / Small tablet */
  --bp-md: 48rem;
  /* 768px - Tablet portrait */
  --bp-lg: 60rem;
  /* 960px - Tablet landscape / Small desktop */
  --bp-xl: 73.75rem;
  /* 1180px - Desktop */
  --bp-2xl: 90rem;
  /* 1440px - Large desktop */

  /* Container Query Breakpoints (container-based) */
  --cq-xs: 15rem;
  /* 240px - Extra small container */
  --cq-sm: 20rem;
  /* 320px - Small container */
  --cq-md: 30rem;
  /* 480px - Medium container */
  --cq-lg: 40rem;
  /* 640px - Large container */
  --cq-xl: 50rem;
  /* 800px - Extra large container */

  /* ========================================
     GRADIENTS
     ======================================== */

  /* Page background gradients */
  --gradient-bg-cassette: radial-gradient(
    circle at top,
    var(--color-bg-elevated) 0%,
    var(--color-bg-panel) 60%
  );

  /* Cassette decorative gradients */
  --gradient-cassette: linear-gradient(
    120deg,
    var(--color-gray-550) 0%,
    var(--color-gray-450) 50%,
    var(--color-gray-700) 100%
  );
  --gradient-reel-center: radial-gradient(
    circle,
    #161829 35%,
    #050610 36%,
    var(--color-gray-950) 70%
  );
  --gradient-reel-border: var(--color-gray-950);
  --gradient-screw: linear-gradient(135deg, var(--color-gray-350) 0%, var(--color-gray-750) 100%);
  --gradient-gear: linear-gradient(
    to bottom,
    var(--color-gray-750) 0%,
    var(--color-gray-650) 50%,
    var(--color-gray-750) 100%
  );

  /* Utility gradients */
  --gradient-fade-dark: linear-gradient(to bottom, transparent 0%, var(--color-bg-dark) 100%);
}

/**
 * Page-Specific Variables
 * These can be overridden in individual CSS files as needed
 */

/* Default Aliases - can be customized per page */
:root {
  /* Semantic color assignments (can be overridden) */
  --accent-primary: var(--color-purple-primary);
  --accent-secondary: var(--color-purple-secondary);
  --text: var(--color-text-primary);
  --muted: var(--color-muted);
  --color-surface-light: var(--color-gray-100);
  --color-text-on-light: var(--color-gray-900);

  /* Semantic typography aliases */
  --title: var(--font-title);
  --body: var(--font-body);
  --ui: var(--font-ui);
  --mono: var(--font-mono);

  /* Semantic spacing for components (can be overridden) */
  --radius: var(--radius-sm);

  /* ========================================
     PAD STATE TOKENS (Studio Pads UI/UX)
     ======================================== */

  /* Pad state colors */
  --pad-border-empty: #333;
  --pad-border-active: var(--color-blue-primary);
  --pad-glow-dim: color-mix(in srgb, var(--color-blue-primary) 25%, transparent);

  /* Button mode tokens */
  --btn-clear-bg: var(--color-black);
  --btn-delete-bg: #333;

  /* Touch target sizing (WCAG 2.1 AA) */
  --touch-min: 44px;
}

/* ==========================================================================
   UTILITIES LAYER - Helper Classes
   Highest specificity, use !important to ensure they always work
   These should be applied as the final layer in the cascade
   ========================================================================== */

/* ----------------------------------------
   ACCESSIBILITY UTILITIES
   ---------------------------------------- */

/* Screen reader only - visually hidden but accessible */
.u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip to content link - visible on focus */
.u-skip-link {
  position: absolute !important;
  top: -100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: var(--z-tooltip) !important;
  padding: var(--pad-sm) var(--pad-md) !important;
  background: var(--color-bg-dark) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
}

.u-skip-link:focus {
  top: var(--space-sm) !important;
}

/* ----------------------------------------
   DISPLAY UTILITIES
   ---------------------------------------- */

.u-hidden {
  display: none !important;
}

.u-block {
  display: block !important;
}

.u-inline {
  display: inline !important;
}

.u-inline-block {
  display: inline-block !important;
}

.u-flex {
  display: flex !important;
}

.u-inline-flex {
  display: inline-flex !important;
}

.u-grid {
  display: grid !important;
}

/* Visibility */
.u-invisible {
  visibility: hidden !important;
}

.u-visible {
  visibility: visible !important;
}

/* ----------------------------------------
   FLEXBOX UTILITIES
   ---------------------------------------- */

/* Direction */
.u-flex-row {
  flex-direction: row !important;
}

.u-flex-col {
  flex-direction: column !important;
}

.u-flex-row-reverse {
  flex-direction: row-reverse !important;
}

.u-flex-col-reverse {
  flex-direction: column-reverse !important;
}

/* Wrap */
.u-flex-wrap {
  flex-wrap: wrap !important;
}

.u-flex-nowrap {
  flex-wrap: nowrap !important;
}

/* Justify Content */
.u-justify-start {
  justify-content: flex-start !important;
}

.u-justify-end {
  justify-content: flex-end !important;
}

.u-justify-center {
  justify-content: center !important;
}

.u-justify-between {
  justify-content: space-between !important;
}

.u-justify-around {
  justify-content: space-around !important;
}

.u-justify-evenly {
  justify-content: space-evenly !important;
}

/* Align Items */
.u-items-start {
  align-items: flex-start !important;
}

.u-items-end {
  align-items: flex-end !important;
}

.u-items-center {
  align-items: center !important;
}

.u-items-baseline {
  align-items: baseline !important;
}

.u-items-stretch {
  align-items: stretch !important;
}

/* Align Self */
.u-self-start {
  align-self: flex-start !important;
}

.u-self-end {
  align-self: flex-end !important;
}

.u-self-center {
  align-self: center !important;
}

.u-self-stretch {
  align-self: stretch !important;
}

/* Flex shorthand */
.u-flex-1 {
  flex: 1 1 0% !important;
}

.u-flex-auto {
  flex: 1 1 auto !important;
}

.u-flex-none {
  flex: none !important;
}

.u-flex-grow {
  flex-grow: 1 !important;
}

.u-flex-shrink {
  flex-shrink: 1 !important;
}

.u-flex-grow-0 {
  flex-grow: 0 !important;
}

.u-flex-shrink-0 {
  flex-shrink: 0 !important;
}

/* ----------------------------------------
   GRID UTILITIES
   ---------------------------------------- */

.u-place-center {
  place-items: center !important;
}

.u-place-start {
  place-items: start !important;
}

.u-place-end {
  place-items: end !important;
}

/* ----------------------------------------
   SPACING UTILITIES
   ---------------------------------------- */

/* Margin */
.u-m-0 {
  margin: 0 !important;
}

.u-m-auto {
  margin: auto !important;
}

.u-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.u-my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Padding */
.u-p-0 {
  padding: 0 !important;
}

.u-p-xs {
  padding: var(--pad-xs) !important;
}

.u-p-sm {
  padding: var(--pad-sm) !important;
}

.u-p-md {
  padding: var(--pad-md) !important;
}

.u-p-lg {
  padding: var(--pad-lg) !important;
}

/* Gap */
.u-gap-0 {
  gap: 0 !important;
}

.u-gap-xs {
  gap: var(--gap-xs) !important;
}

.u-gap-sm {
  gap: var(--gap-sm) !important;
}

.u-gap-md {
  gap: var(--gap-md) !important;
}

.u-gap-lg {
  gap: var(--gap-lg) !important;
}

.u-gap-xl {
  gap: var(--gap-xl) !important;
}

/* ----------------------------------------
   TEXT UTILITIES
   ---------------------------------------- */

/* Alignment */
.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-right {
  text-align: right !important;
}

/* Transform */
.u-uppercase {
  text-transform: uppercase !important;
}

.u-lowercase {
  text-transform: lowercase !important;
}

.u-capitalize {
  text-transform: capitalize !important;
}

.u-normal-case {
  text-transform: none !important;
}

/* Weight */
.u-font-normal {
  font-weight: var(--font-weight-regular) !important;
}

.u-font-medium {
  font-weight: var(--font-weight-medium) !important;
}

.u-font-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

.u-font-bold {
  font-weight: var(--font-weight-bold) !important;
}

/* Size */
.u-text-xs {
  font-size: var(--text-xs) !important;
}

.u-text-sm {
  font-size: var(--text-sm) !important;
}

.u-text-base {
  font-size: var(--text-base) !important;
}

.u-text-lg {
  font-size: var(--text-lg) !important;
}

.u-text-xl {
  font-size: var(--text-xl) !important;
}

/* Wrapping */
.u-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.u-break-words {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.u-whitespace-nowrap {
  white-space: nowrap !important;
}

.u-whitespace-normal {
  white-space: normal !important;
}

/* ----------------------------------------
   COLOR UTILITIES
   ---------------------------------------- */

/* Text colors */
.u-text-primary {
  color: var(--color-text-primary) !important;
}

.u-text-secondary {
  color: var(--color-text-secondary) !important;
}

.u-text-muted {
  color: var(--color-muted) !important;
}

.u-text-accent {
  color: var(--accent-primary) !important;
}

.u-text-success {
  color: var(--color-success) !important;
}

.u-text-white {
  color: var(--color-white) !important;
}

/* Background colors */
.u-bg-dark {
  background-color: var(--color-bg-dark) !important;
}

.u-bg-panel {
  background-color: var(--color-bg-panel) !important;
}

.u-bg-transparent {
  background-color: transparent !important;
}

/* ----------------------------------------
   SIZING UTILITIES
   ---------------------------------------- */

.u-w-full {
  width: 100% !important;
}

.u-w-auto {
  width: auto !important;
}

.u-h-full {
  height: 100% !important;
}

.u-h-auto {
  height: auto !important;
}

.u-min-h-screen {
  min-height: 100vh !important;
}

.u-max-w-full {
  max-width: 100% !important;
}

/* ----------------------------------------
   POSITION UTILITIES
   ---------------------------------------- */

.u-relative {
  position: relative !important;
}

.u-absolute {
  position: absolute !important;
}

.u-fixed {
  position: fixed !important;
}

.u-sticky {
  position: sticky !important;
}

.u-static {
  position: static !important;
}

.u-inset-0 {
  inset: 0 !important;
}

.u-top-0 {
  top: 0 !important;
}

.u-right-0 {
  right: 0 !important;
}

.u-bottom-0 {
  bottom: 0 !important;
}

.u-left-0 {
  left: 0 !important;
}

/* ----------------------------------------
   OVERFLOW UTILITIES
   ---------------------------------------- */

.u-overflow-hidden {
  overflow: hidden !important;
}

.u-overflow-auto {
  overflow: auto !important;
}

.u-overflow-scroll {
  overflow: scroll !important;
}

.u-overflow-visible {
  overflow: visible !important;
}

.u-overflow-x-auto {
  overflow-x: auto !important;
}

.u-overflow-y-auto {
  overflow-y: auto !important;
}

/* ----------------------------------------
   CURSOR & INTERACTION UTILITIES
   ---------------------------------------- */

.u-cursor-pointer {
  cursor: pointer !important;
}

.u-cursor-default {
  cursor: default !important;
}

.u-cursor-not-allowed {
  cursor: not-allowed !important;
}

.u-pointer-events-none {
  pointer-events: none !important;
}

.u-pointer-events-auto {
  pointer-events: auto !important;
}

.u-select-none {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.u-select-text {
  -webkit-touch-callout: default !important;
  user-select: text !important;
}

/* ----------------------------------------
   BORDER UTILITIES
   ---------------------------------------- */

.u-border-0 {
  border: 0 !important;
}

.u-border {
  border: var(--border-subtle) !important;
}

.u-border-light {
  border: var(--border-light) !important;
}

.u-rounded-none {
  border-radius: 0 !important;
}

.u-rounded-sm {
  border-radius: var(--radius-sm) !important;
}

.u-rounded-md {
  border-radius: var(--radius-md) !important;
}

.u-rounded-lg {
  border-radius: var(--radius-lg) !important;
}

.u-rounded-full {
  border-radius: var(--radius-full) !important;
}

/* ----------------------------------------
   SHARED COMPONENTS
   ---------------------------------------- */

/*
 * Raised card with optional glow slot.
 * Override --neu-glow to add custom glows while keeping base treatment.
 */
.neu-card {
  --neu-glow: 0 0 0 transparent;
  /* Invisible default - override for custom glows */
  background: var(--neu-surface);
  border: none;
  border-radius: var(--radius-2xl);
  box-shadow: var(--neu-raised), var(--neu-edge-highlight), var(--neu-glow);
}

/* Raised card - small variant */
.neu-card--sm {
  border-radius: var(--radius-xl);
  box-shadow: var(--neu-raised-sm), var(--neu-edge-highlight-subtle), var(--neu-glow);
}

/* Inset container - no edge highlight (pushed in, not raised) */
.neu-inset {
  background: var(--neu-surface);
  border: none;
  border-radius: var(--radius-2xl);
  box-shadow: var(--neu-inset);
}

/*
 * Neumorphic button with optional glow slot.
 * Override --neu-glow to add custom glows while keeping base treatment.
 */
.neu-btn {
  --neu-glow: 0 0 0 transparent;
  /* Invisible default - override for custom glows */
  background: var(--neu-surface);
  border: none;
  color: inherit;
  border-radius: var(--radius-full);
  box-shadow: var(--neu-raised-sm), var(--neu-edge-highlight), var(--neu-glow);
  cursor: pointer;
  transition:
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.neu-btn:hover {
  box-shadow: var(--neu-raised), var(--neu-edge-highlight), var(--neu-glow);
}

.neu-btn:active,
.neu-btn.is-active {
  box-shadow: var(--neu-pressed);
  transform: scale(0.97);
}

/* ----------------------------------------
   CREDIT LINE
   Subtle attribution text for photos, artwork, etc.
   ---------------------------------------- */

.credit {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: color-mix(in srgb, var(--color-muted) 40%, transparent);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  text-align: center;
}

/* ----------------------------------------
   OPACITY UTILITIES
   ---------------------------------------- */

.u-opacity-0 {
  opacity: 0 !important;
}

.u-opacity-25 {
  opacity: 0.25 !important;
}

.u-opacity-50 {
  opacity: 0.5 !important;
}

.u-opacity-75 {
  opacity: 0.75 !important;
}

.u-opacity-100 {
  opacity: 1 !important;
}

/* ----------------------------------------
   TRANSITION UTILITIES
   ---------------------------------------- */

.u-transition {
  transition: all var(--transition-base) !important;
}

.u-transition-fast {
  transition: all var(--transition-fast) !important;
}

.u-transition-slow {
  transition: all var(--transition-slow) !important;
}

.u-transition-none {
  transition: none !important;
}

/* ----------------------------------------
   Z-INDEX UTILITIES
   ---------------------------------------- */

.u-z-base {
  z-index: var(--z-base) !important;
}

.u-z-raised {
  z-index: var(--z-raised) !important;
}

.u-z-dropdown {
  z-index: var(--z-dropdown) !important;
}

.u-z-overlay {
  z-index: var(--z-overlay) !important;
}

.u-z-modal {
  z-index: var(--z-modal) !important;
}

/* ----------------------------------------
   RESPONSIVE UTILITIES
   Show/hide at breakpoints
   ---------------------------------------- */

/* Hide on mobile, show on tablet+ */
@media (max-width: 47.9375rem) {
  .u-hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet+, show on mobile */
@media (min-width: 48rem) {
  .u-hide-tablet {
    display: none !important;
  }
}

/* Hide on desktop+ */
@media (min-width: 60rem) {
  .u-hide-desktop {
    display: none !important;
  }
}

/* Show only on mobile */
@media (min-width: 48rem) {
  .u-show-mobile-only {
    display: none !important;
  }
}

/* Show only on tablet */
@media (max-width: 47.9375rem), (min-width: 60rem) {
  .u-show-tablet-only {
    display: none !important;
  }
}