:root {



  --bg-hsl: 48 38% 97%;
  --bg-surface-hsl: 0 0% 100%;
  --bg-surface-hover-hsl: 42 36% 95%;
  --bg-elevated-hsl: 0 0% 100%;
  --bg-input-hsl: 0 0% 100%;
  --bg-card-hsl: 0 0% 100%;


  --accent-hsl: 23 82% 54%;
  --accent-hover-hsl: 23 79% 44%;


  --gold-hsl: 23 87% 71%;


  --text-hsl: 240 33% 5%;
  --text-secondary-hsl: 240 5% 24%;
  --text-muted-hsl: 240 2% 36%;
  --text-inverse-hsl: 40 33% 93%;


  --success-hsl: 158 64% 42%;
  --warning-hsl: 38 92% 46%;
  --error-hsl: 0 72% 51%;
  --info-hsl: 213 84% 50%;



  --background: var(--bg-hsl);
  --foreground: var(--text-hsl);
  --card: var(--bg-card-hsl);
  --card-foreground: var(--text-hsl);
  --popover: var(--bg-elevated-hsl);
  --popover-foreground: var(--text-hsl);
  --primary: var(--accent-hsl);

  --primary-foreground: 240 33% 5%;
  --secondary: var(--gold-hsl);
  --secondary-foreground: 240 33% 5%;
  --muted: var(--bg-surface-hover-hsl);
  --muted-foreground: var(--text-muted-hsl);
  --accent-foreground: var(--text-inverse-hsl);
  --destructive: var(--error-hsl);
  --destructive-foreground: 0 0% 100%;
  --input: var(--bg-input-hsl);
  --ring: var(--accent-hsl);


  --border: rgba(8, 8, 16, 0.08);
  --border-subtle: rgba(8, 8, 16, 0.04);
  --border-hover: rgba(8, 8, 16, 0.14);
  --border-focus: hsl(var(--accent-hsl));


  --bg: hsl(var(--bg-hsl));
  --bg-surface: hsl(var(--bg-surface-hsl));
  --bg-surface-hover: hsl(var(--bg-surface-hover-hsl));
  --bg-elevated: hsl(var(--bg-elevated-hsl));
  --bg-input: hsl(var(--bg-input-hsl));
  --bg-card: hsl(var(--bg-card-hsl));
  --accent: hsl(var(--accent-hsl));
  --accent-hover: hsl(var(--accent-hover-hsl));
  --accent-muted: hsl(var(--accent-hsl) / 0.10);
  --accent-dim: hsl(var(--accent-hsl) / 0.08);
  --accent-border: hsl(var(--accent-hsl) / 0.20);
  --gold: hsl(var(--gold-hsl));
  --gold-dim: hsl(var(--gold-hsl) / 0.10);
  --gold-border: hsl(var(--gold-hsl) / 0.20);
  --text: hsl(var(--text-hsl));
  --text-primary: hsl(var(--text-hsl));
  --text-secondary: hsl(var(--text-secondary-hsl));
  --text-muted: hsl(var(--text-muted-hsl));
  --text-inverse: hsl(var(--text-inverse-hsl));
  --success: hsl(var(--success-hsl));
  --success-bg: hsl(var(--success-hsl) / 0.10);
  --success-border: hsl(var(--success-hsl) / 0.20);
  --warning: hsl(var(--warning-hsl));
  --warning-bg: hsl(var(--warning-hsl) / 0.10);
  --warning-border: hsl(var(--warning-hsl) / 0.20);
  --error: hsl(var(--error-hsl));
  --error-bg: hsl(var(--error-hsl) / 0.10);
  --error-border: hsl(var(--error-hsl) / 0.20);
  --info: hsl(var(--info-hsl));
  --info-bg: hsl(var(--info-hsl) / 0.10);
  --info-border: hsl(var(--info-hsl) / 0.20);



  --brand-gradient: linear-gradient(135deg, #f5a574 0%, #ea7228 55%, #c85a18 100%);


  --shadow-sm: 0 1px 2px 0 rgba(8, 8, 16, 0.05);
  --shadow: 0 1px 3px 0 rgba(8, 8, 16, 0.07), 0 1px 2px -1px rgba(8, 8, 16, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(8, 8, 16, 0.08), 0 2px 4px -2px rgba(8, 8, 16, 0.05);
  --shadow-lg: 0 12px 20px -4px rgba(8, 8, 16, 0.10), 0 4px 8px -4px rgba(8, 8, 16, 0.06);
  --shadow-xl: 0 20px 28px -6px rgba(8, 8, 16, 0.12), 0 8px 12px -6px rgba(8, 8, 16, 0.08);
  --shadow-2xl: 0 25px 50px -12px rgba(8, 8, 16, 0.18);
  --shadow-inner: inset 0 2px 4px 0 rgba(8, 8, 16, 0.05);


  --radius: 0.625rem;



  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --motion-enter: 400ms;
  --motion-feature: 800ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);


  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Sora', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}



:root.dark,
.dark {
  --bg-hsl: 240 33% 5%;
  --bg-surface-hsl: 240 27% 9%;
  --bg-surface-hover-hsl: 240 25% 13%;
  --bg-elevated-hsl: 240 24% 15%;
  --bg-input-hsl: 240 33% 7%;
  --bg-card-hsl: 240 27% 9%;


  --accent-hover-hsl: 25 90% 60%;

  --text-hsl: 40 33% 93%;
  --text-secondary-hsl: 240 6% 74%;
  --text-muted-hsl: 240 4% 55%;
  --text-inverse-hsl: 240 33% 5%;


  --primary-foreground: 240 33% 5%;
  --secondary-foreground: 240 33% 5%;


  --success-hsl: 158 64% 52%;
  --warning-hsl: 43 96% 56%;
  --error-hsl: 0 91% 71%;
  --info-hsl: 213 94% 68%;


  --destructive-foreground: 240 33% 5%;


  --border: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.03);
  --border-hover: rgba(255, 255, 255, 0.12);


  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.55);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.65);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.30);
}




h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}