@tailwind base;
@tailwind components;
@tailwind utilities;

/* Multi-theme design system with CSS custom properties */

@layer base {
  /* Default Theme - Light Mode */
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;

    /* Brand colors */
    --brand-primary: 222.2 47.4% 11.2%;
    --brand-secondary: 210 40% 96.1%;
    --brand-accent: 210 40% 96.1%;

    /* Semantic colors */
    --success: 142.1 76.2% 36.3%;
    --warning: 47.9 95.8% 53.1%;
    --error: 0 84.2% 60.2%;
    --info: 199.89 89.55% 48.04%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(222.2 47.4% 11.2%), hsl(222.2 47.4% 21.2%));
    --gradient-secondary: linear-gradient(135deg, hsl(210 40% 96.1%), hsl(210 40% 93.1%));
    --gradient-brand: linear-gradient(135deg, hsl(222.2 47.4% 11.2%), hsl(222.2 47.4% 21.2%));

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(222.2 47.4% 11.2% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(222.2 47.4% 11.2% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(222.2 47.4% 11.2% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(222.2 47.4% 11.2% / 0.1);

    /* Component specific */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 222.2 84% 4.9%;
    --sidebar-border: 214.3 31.8% 91.4%;
    --modal-backdrop: 222.2 84% 4.9% / 0.8;
    --dropdown-background: 0 0% 100%;
    --table-header: 210 40% 96.1%;
    --code-background: 210 40% 96.1%;

    /* Transitions */
    --transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    --transition-transform: transform 0.15s ease-in-out;
    --transition-all: all 0.15s ease-in-out;

    /* Fonts */
    --font-family: 'Inter', sans-serif;
  }

  /* Default Theme - Dark Mode */
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;

    --brand-primary: 210 40% 98%;
    --brand-secondary: 217.2 32.6% 17.5%;
    --brand-accent: 217.2 32.6% 17.5%;

    --success: 142.1 70.6% 45.3%;
    --warning: 47.9 95.8% 53.1%;
    --error: 0 84.2% 60.2%;
    --info: 199.89 89.55% 48.04%;

    --gradient-primary: linear-gradient(135deg, hsl(210 40% 98%), hsl(210 40% 88%));
    --gradient-secondary: linear-gradient(135deg, hsl(217.2 32.6% 17.5%), hsl(217.2 32.6% 27.5%));
    --gradient-brand: linear-gradient(135deg, hsl(210 40% 98%), hsl(210 40% 88%));

    --shadow-sm: 0 1px 2px 0 hsl(217.2 32.6% 17.5% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(217.2 32.6% 17.5% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(217.2 32.6% 17.5% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(217.2 32.6% 17.5% / 0.1);

    --sidebar-background: 217.2 32.6% 17.5%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-border: 217.2 32.6% 27.5%;
    --modal-backdrop: 222.2 84% 4.9% / 0.8;
    --dropdown-background: 222.2 84% 4.9%;
    --table-header: 217.2 32.6% 17.5%;
    --code-background: 217.2 32.6% 17.5%;
  }

  /* Airbnb Theme - Light Mode */
  [data-theme="airbnb"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 13%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 13%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 13%;
    --primary: 0 100% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 13%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 100% 95%;
    --accent-foreground: 0 100% 60%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 89%;
    --input: 0 0% 89%;
    --ring: 0 100% 60%;
    --radius: 0.75rem;

    --brand-primary: 0 100% 60%;
    --brand-secondary: 0 0% 96%;
    --brand-accent: 0 100% 95%;

    --success: 142.1 76.2% 36.3%;
    --warning: 47.9 95.8% 53.1%;
    --error: 0 84.2% 60.2%;
    --info: 199.89 89.55% 48.04%;

    --gradient-primary: linear-gradient(135deg, hsl(0 100% 60%), hsl(0 100% 70%));
    --gradient-secondary: linear-gradient(135deg, hsl(0 0% 96%), hsl(0 0% 93%));
    --gradient-brand: linear-gradient(135deg, hsl(0 100% 60%), hsl(0 100% 70%));

    --shadow-sm: 0 1px 2px 0 hsl(0 100% 60% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(0 100% 60% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(0 100% 60% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(0 100% 60% / 0.1);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 0 0% 13%;
    --sidebar-border: 0 0% 89%;
    --modal-backdrop: 0 0% 13% / 0.8;
    --dropdown-background: 0 0% 100%;
    --table-header: 0 0% 96%;
    --code-background: 0 0% 96%;
  }

  /* Airbnb Theme - Dark Mode */
  [data-theme="airbnb"].dark {
    --background: 0 0% 7%;
    --foreground: 0 0% 98%;
    --card: 0 0% 11%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 11%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 100% 65%;
    --primary-foreground: 0 0% 7%;
    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 65%;
    --accent: 0 0% 15%;
    --accent-foreground: 0 100% 65%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: 0 100% 65%;

    --brand-primary: 0 100% 65%;
    --brand-secondary: 0 0% 15%;
    --brand-accent: 0 0% 15%;

    --gradient-primary: linear-gradient(135deg, hsl(0 100% 65%), hsl(0 100% 75%));
    --gradient-secondary: linear-gradient(135deg, hsl(0 0% 15%), hsl(0 0% 25%));
    --gradient-brand: linear-gradient(135deg, hsl(0 100% 65%), hsl(0 100% 75%));

    --shadow-sm: 0 1px 2px 0 hsl(0 100% 65% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(0 100% 65% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(0 100% 65% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(0 100% 65% / 0.1);

    --sidebar-background: 0 0% 11%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 18%;
    --modal-backdrop: 0 0% 7% / 0.8;
    --dropdown-background: 0 0% 11%;
    --table-header: 0 0% 15%;
    --code-background: 0 0% 15%;
  }

  /* Slack Theme - Light Mode */
  [data-theme="slack"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 13%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 13%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 13%;
    --primary: 289 100% 32%;
    --primary-foreground: 0 0% 100%;
    --secondary: 289 20% 95%;
    --secondary-foreground: 0 0% 13%;
    --muted: 289 20% 95%;
    --muted-foreground: 0 0% 45%;
    --accent: 289 100% 95%;
    --accent-foreground: 289 100% 32%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 289 20% 89%;
    --input: 289 20% 89%;
    --ring: 289 100% 32%;
    --radius: 0.375rem;

    --brand-primary: 289 100% 32%;
    --brand-secondary: 289 20% 95%;
    --brand-accent: 289 100% 95%;

    --success: 142.1 76.2% 36.3%;
    --warning: 47.9 95.8% 53.1%;
    --error: 0 84.2% 60.2%;
    --info: 199.89 89.55% 48.04%;

    --gradient-primary: linear-gradient(135deg, hsl(289 100% 32%), hsl(289 100% 42%));
    --gradient-secondary: linear-gradient(135deg, hsl(289 20% 95%), hsl(289 20% 92%));
    --gradient-brand: linear-gradient(135deg, hsl(289 100% 32%), hsl(289 100% 42%));

    --shadow-sm: 0 1px 2px 0 hsl(289 100% 32% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(289 100% 32% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(289 100% 32% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(289 100% 32% / 0.1);

    --sidebar-background: 289 20% 98%;
    --sidebar-foreground: 0 0% 13%;
    --sidebar-border: 289 20% 89%;
    --modal-backdrop: 0 0% 13% / 0.8;
    --dropdown-background: 0 0% 100%;
    --table-header: 289 20% 95%;
    --code-background: 289 20% 95%;
  }

  /* Slack Theme - Dark Mode */
  [data-theme="slack"].dark {
    --background: 26 15% 8%;
    --foreground: 0 0% 98%;
    --card: 26 15% 12%;
    --card-foreground: 0 0% 98%;
    --popover: 26 15% 12%;
    --popover-foreground: 0 0% 98%;
    --primary: 289 100% 45%;
    --primary-foreground: 26 15% 8%;
    --secondary: 26 15% 18%;
    --secondary-foreground: 0 0% 98%;
    --muted: 26 15% 18%;
    --muted-foreground: 0 0% 65%;
    --accent: 26 15% 18%;
    --accent-foreground: 289 100% 45%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 26 15% 22%;
    --input: 26 15% 22%;
    --ring: 289 100% 45%;

    --brand-primary: 289 100% 45%;
    --brand-secondary: 26 15% 18%;
    --brand-accent: 26 15% 18%;

    --gradient-primary: linear-gradient(135deg, hsl(289 100% 45%), hsl(289 100% 55%));
    --gradient-secondary: linear-gradient(135deg, hsl(26 15% 18%), hsl(26 15% 28%));
    --gradient-brand: linear-gradient(135deg, hsl(289 100% 45%), hsl(289 100% 55%));

    --shadow-sm: 0 1px 2px 0 hsl(289 100% 45% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(289 100% 45% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(289 100% 45% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(289 100% 45% / 0.1);

    --sidebar-background: 26 15% 12%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-border: 26 15% 22%;
    --modal-backdrop: 26 15% 8% / 0.8;
    --dropdown-background: 26 15% 12%;
    --table-header: 26 15% 18%;
    --code-background: 26 15% 18%;
  }

  /* GitHub Theme - Light Mode */
  [data-theme="github"] {
    --background: 0 0% 100%;
    --foreground: 213 13% 13%;
    --card: 0 0% 100%;
    --card-foreground: 213 13% 13%;
    --popover: 0 0% 100%;
    --popover-foreground: 213 13% 13%;
    --primary: 213 13% 13%;
    --primary-foreground: 0 0% 100%;
    --secondary: 213 13% 96%;
    --secondary-foreground: 213 13% 13%;
    --muted: 213 13% 96%;
    --muted-foreground: 213 13% 45%;
    --accent: 213 13% 95%;
    --accent-foreground: 213 13% 13%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 213 13% 89%;
    --input: 213 13% 89%;
    --ring: 213 13% 13%;
    --radius: 0.25rem;

    --brand-primary: 213 13% 13%;
    --brand-secondary: 213 13% 96%;
    --brand-accent: 213 13% 95%;

    --success: 142.1 76.2% 36.3%;
    --warning: 47.9 95.8% 53.1%;
    --error: 0 84.2% 60.2%;
    --info: 199.89 89.55% 48.04%;

    --gradient-primary: linear-gradient(135deg, hsl(213 13% 13%), hsl(213 13% 23%));
    --gradient-secondary: linear-gradient(135deg, hsl(213 13% 96%), hsl(213 13% 93%));
    --gradient-brand: linear-gradient(135deg, hsl(213 13% 13%), hsl(213 13% 23%));

    --shadow-sm: 0 1px 2px 0 hsl(213 13% 13% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(213 13% 13% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(213 13% 13% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(213 13% 13% / 0.1);

    --sidebar-background: 213 13% 98%;
    --sidebar-foreground: 213 13% 13%;
    --sidebar-border: 213 13% 89%;
    --modal-backdrop: 213 13% 13% / 0.8;
    --dropdown-background: 0 0% 100%;
    --table-header: 213 13% 96%;
    --code-background: 213 13% 96%;
  }

  /* GitHub Theme - Dark Mode */
  [data-theme="github"].dark {
    --background: 220 13% 9%;
    --foreground: 220 14% 93%;
    --card: 220 13% 13%;
    --card-foreground: 220 14% 93%;
    --popover: 220 13% 13%;
    --popover-foreground: 220 14% 93%;
    --primary: 220 14% 93%;
    --primary-foreground: 220 13% 9%;
    --secondary: 220 13% 17%;
    --secondary-foreground: 220 14% 93%;
    --muted: 220 13% 17%;
    --muted-foreground: 220 9% 65%;
    --accent: 220 13% 17%;
    --accent-foreground: 220 14% 93%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 220 14% 93%;
    --border: 220 13% 21%;
    --input: 220 13% 21%;
    --ring: 220 14% 93%;

    --brand-primary: 220 14% 93%;
    --brand-secondary: 220 13% 17%;
    --brand-accent: 220 13% 17%;

    --gradient-primary: linear-gradient(135deg, hsl(220 14% 93%), hsl(220 14% 83%));
    --gradient-secondary: linear-gradient(135deg, hsl(220 13% 17%), hsl(220 13% 27%));
    --gradient-brand: linear-gradient(135deg, hsl(220 14% 93%), hsl(220 14% 83%));

    --shadow-sm: 0 1px 2px 0 hsl(220 14% 93% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(220 14% 93% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(220 14% 93% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(220 14% 93% / 0.1);

    --sidebar-background: 220 13% 13%;
    --sidebar-foreground: 220 14% 93%;
    --sidebar-border: 220 13% 21%;
    --modal-backdrop: 220 13% 9% / 0.8;
    --dropdown-background: 220 13% 13%;
    --table-header: 220 13% 17%;
    --code-background: 220 13% 17%;
  }

  /* Spotify Theme - Default (Dark) */
  [data-theme="spotify"] {
    --background: 0 0% 7%;
    --foreground: 0 0% 98%;
    --card: 0 0% 11%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 11%;
    --popover-foreground: 0 0% 98%;
    --primary: 141 76% 48%;
    --primary-foreground: 0 0% 7%;
    --secondary: 0 0% 18%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 18%;
    --muted-foreground: 0 0% 63%;
    --accent: 0 0% 18%;
    --accent-foreground: 141 76% 48%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: 141 76% 48%;
    --radius: 1rem;

    --brand-primary: 141 76% 48%;
    --brand-secondary: 0 0% 18%;
    --brand-accent: 0 0% 18%;

    --success: 142.1 76.2% 36.3%;
    --warning: 47.9 95.8% 53.1%;
    --error: 0 84.2% 60.2%;
    --info: 199.89 89.55% 48.04%;

    --gradient-primary: linear-gradient(135deg, hsl(141 76% 48%), hsl(141 76% 58%));
    --gradient-secondary: linear-gradient(135deg, hsl(0 0% 18%), hsl(0 0% 15%));
    --gradient-brand: linear-gradient(135deg, hsl(141 76% 48%), hsl(141 76% 58%));

    --shadow-sm: 0 1px 2px 0 hsl(141 76% 48% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(141 76% 48% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(141 76% 48% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(141 76% 48% / 0.1);

    --sidebar-background: 0 0% 11%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 18%;
    --modal-backdrop: 0 0% 7% / 0.8;
    --dropdown-background: 0 0% 11%;
    --table-header: 0 0% 18%;
    --code-background: 0 0% 18%;
  }

  /* Spotify Theme - Light Mode */
  [data-theme="spotify"].light {
    --background: 0 0% 100%;
    --foreground: 0 0% 13%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 13%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 13%;
    --primary: 141 76% 38%;
    --primary-foreground: 0 0% 100%;
    --secondary: 141 10% 96%;
    --secondary-foreground: 0 0% 13%;
    --muted: 141 10% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 141 10% 95%;
    --accent-foreground: 141 76% 38%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 141 10% 89%;
    --input: 141 10% 89%;
    --ring: 141 76% 38%;

    --brand-primary: 141 76% 38%;
    --brand-secondary: 141 10% 96%;
    --brand-accent: 141 10% 95%;

    --gradient-primary: linear-gradient(135deg, hsl(141 76% 38%), hsl(141 76% 48%));
    --gradient-secondary: linear-gradient(135deg, hsl(141 10% 96%), hsl(141 10% 93%));
    --gradient-brand: linear-gradient(135deg, hsl(141 76% 38%), hsl(141 76% 48%));

    --shadow-sm: 0 1px 2px 0 hsl(141 76% 38% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(141 76% 38% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(141 76% 38% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(141 76% 38% / 0.1);

    --sidebar-background: 141 10% 98%;
    --sidebar-foreground: 0 0% 13%;
    --sidebar-border: 141 10% 89%;
    --modal-backdrop: 0 0% 13% / 0.8;
    --dropdown-background: 0 0% 100%;
    --table-header: 141 10% 96%;
    --code-background: 141 10% 96%;
  }

  /* Yantra Theme - Default (Dark)
     Scene: AI engineer iterating on agentic workflows late evening on a 32"
     monitor in a warm-lit home office. Warm blue-charcoal surface, amber-gold
     signal color. Committed color strategy; neutrals tinted toward brand hue. */
  [data-theme="yantra"] {
    --background: 222 18% 9%;
    --foreground: 38 30% 94%;
    --card: 222 16% 12%;
    --card-foreground: 38 30% 94%;
    --popover: 222 16% 12%;
    --popover-foreground: 38 30% 94%;
    --primary: 38 92% 58%;
    --primary-foreground: 222 30% 8%;
    --secondary: 222 14% 17%;
    --secondary-foreground: 38 30% 94%;
    --muted: 222 14% 17%;
    --muted-foreground: 222 10% 65%;
    --accent: 222 14% 20%;
    --accent-foreground: 38 92% 64%;
    --destructive: 0 72% 55%;
    --destructive-foreground: 38 30% 96%;
    --border: 222 14% 20%;
    --input: 222 14% 20%;
    --ring: 38 92% 58%;
    --radius: 0.625rem;

    --brand-primary: 38 92% 58%;
    --brand-secondary: 222 14% 17%;
    --brand-accent: 38 80% 70%;

    --success: 152 60% 45%;
    --warning: 38 92% 58%;
    --error: 0 72% 55%;
    --info: 200 80% 55%;

    --gradient-primary: linear-gradient(135deg, hsl(38 92% 58%), hsl(28 92% 52%));
    --gradient-secondary: linear-gradient(135deg, hsl(222 14% 17%), hsl(222 14% 22%));
    --gradient-brand: linear-gradient(135deg, hsl(38 92% 58%), hsl(14 80% 56%));

    --shadow-sm: 0 1px 2px 0 hsl(222 30% 4% / 0.4);
    --shadow-md: 0 4px 12px -2px hsl(222 30% 4% / 0.45);
    --shadow-lg: 0 12px 32px -8px hsl(222 30% 4% / 0.55);
    --shadow-xl: 0 24px 48px -12px hsl(222 30% 4% / 0.65);

    --sidebar-background: 222 18% 7%;
    --sidebar-foreground: 38 30% 94%;
    --sidebar-border: 222 14% 14%;
    --modal-backdrop: 222 30% 4% / 0.85;
    --dropdown-background: 222 16% 12%;
    --table-header: 222 14% 14%;
    --code-background: 222 18% 7%;
  }

  /* Yantra Theme - Light Mode */
  [data-theme="yantra"].light {
    --background: 38 30% 98%;
    --foreground: 222 30% 12%;
    --card: 0 0% 100%;
    --card-foreground: 222 30% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 30% 12%;
    --primary: 28 88% 48%;
    --primary-foreground: 38 30% 98%;
    --secondary: 38 30% 95%;
    --secondary-foreground: 222 30% 12%;
    --muted: 38 22% 94%;
    --muted-foreground: 222 14% 42%;
    --accent: 38 60% 92%;
    --accent-foreground: 28 88% 38%;
    --destructive: 0 72% 50%;
    --destructive-foreground: 38 30% 98%;
    --border: 38 18% 88%;
    --input: 38 18% 88%;
    --ring: 28 88% 48%;

    --brand-primary: 28 88% 48%;
    --brand-secondary: 38 30% 95%;
    --brand-accent: 38 92% 58%;

    --gradient-primary: linear-gradient(135deg, hsl(28 88% 48%), hsl(14 80% 50%));
    --gradient-secondary: linear-gradient(135deg, hsl(38 30% 95%), hsl(38 30% 92%));
    --gradient-brand: linear-gradient(135deg, hsl(38 92% 58%), hsl(14 80% 56%));

    --shadow-sm: 0 1px 2px 0 hsl(28 60% 30% / 0.06);
    --shadow-md: 0 4px 12px -2px hsl(28 60% 30% / 0.1);
    --shadow-lg: 0 12px 32px -8px hsl(28 60% 30% / 0.12);
    --shadow-xl: 0 24px 48px -12px hsl(28 60% 30% / 0.16);

    --sidebar-background: 38 30% 96%;
    --sidebar-foreground: 222 30% 12%;
    --sidebar-border: 38 18% 88%;
    --modal-backdrop: 222 30% 12% / 0.7;
    --dropdown-background: 0 0% 100%;
    --table-header: 38 22% 94%;
    --code-background: 38 22% 94%;
  }

  /* ─────────────────────────────────────────────────────────────
     Yantra Editorial Layer — shared design system for marketing
     and impeccable product surfaces (pricing, operator, landing,
     gallery, etc.). Tokens use OKLCH; classes are unscoped so any
     page can opt-in by writing `<div className="y-display">`.

     Brand register: warm cream + persimmon accent, Josefin Sans
     for display, ui-monospace for captions. Tinted neutrals (no
     pure black/white). Animation easing committed to one curve.
     ───────────────────────────────────────────────────────────── */
  :root {
    --y-cream:        oklch(0.97 0.012 60);
    --y-cream-2:      oklch(0.94 0.014 60);
    --y-cream-3:      oklch(0.91 0.014 60);
    --y-ink:          oklch(0.18 0.012 60);
    --y-ink-2:        oklch(0.32 0.013 60);
    --y-mute:         oklch(0.55 0.012 60);
    --y-rule:         oklch(0.86 0.012 60);
    --y-rule-2:       oklch(0.78 0.012 60);
    --y-accent:       oklch(0.66 0.19 38);
    --y-accent-ink:   oklch(0.32 0.13 38);
    --y-ease:         cubic-bezier(0.16, 1, 0.3, 1);
    --y-font-display: 'Josefin Sans', ui-sans-serif, system-ui, sans-serif;
    --y-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  }

  [data-theme="yantra"].dark,
  [data-theme="yantra"]:not(.light) {
    /* Inverted editorial palette for dark surfaces — same accent. */
    --y-cream:        oklch(0.20 0.013 60);
    --y-cream-2:      oklch(0.24 0.013 60);
    --y-cream-3:      oklch(0.28 0.013 60);
    --y-ink:          oklch(0.96 0.010 60);
    --y-ink-2:        oklch(0.82 0.010 60);
    --y-mute:         oklch(0.62 0.010 60);
    --y-rule:         oklch(0.32 0.010 60);
    --y-rule-2:       oklch(0.40 0.010 60);
    --y-accent:       oklch(0.74 0.18 38);
    --y-accent-ink:   oklch(0.86 0.16 38);
  }
}

/* Yantra editorial — surface + typography utilities (unscoped) */
@layer components {
  .y-surface {
    background: var(--y-cream);
    color: var(--y-ink);
    font-feature-settings: 'ss01', 'cv01', 'cv11';
  }

  .y-display {
    font-family: var(--y-font-display);
    font-weight: 200;
    font-size: clamp(2.5rem, 6.5vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--y-ink);
  }
  .y-display em {
    font-style: italic;
    font-weight: 300;
    color: var(--y-accent);
  }
  .y-display .y-period { color: var(--y-accent); }

  .y-prose {
    font-family: var(--y-font-display);
    font-weight: 300;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--y-ink);
  }
  .y-prose em { font-style: italic; color: var(--y-accent-ink); }

  .y-lede {
    font-family: var(--y-font-display);
    font-weight: 300;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--y-ink-2);
    max-width: 56ch;
  }
  .y-lede em { font-style: italic; color: var(--y-accent); }

  .y-mono {
    font-family: var(--y-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--y-mute);
  }

  .y-num {
    font-family: var(--y-font-display);
    font-weight: 200;
    font-size: clamp(2.5rem, 4vw, 3.75rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--y-ink);
  }

  .y-rule { height: 1px; background: var(--y-rule); border: 0; }
  .y-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--y-accent);
    display: inline-block;
  }

  /* Section grid — paired meta column + content column */
  .y-section { border-top: 1px solid var(--y-rule); }
  .y-section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
  @media (min-width: 768px) {
    .y-section-head { grid-template-columns: 5fr 7fr; gap: 2rem; }
  }
  .y-section-num {
    font-family: var(--y-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--y-mute);
  }
  .y-section-title {
    font-family: var(--y-font-display);
    font-weight: 300;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--y-ink);
  }
  .y-section-title em { font-style: italic; color: var(--y-accent); }
  .y-section-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--y-ink-2);
    max-width: 60ch;
    margin-top: 0.75rem;
  }

  /* Reveal animation — committed to one easing curve */
  .y-reveal {
    opacity: 0;
    transform: translateY(0.6rem);
    animation: y-reveal 1100ms var(--y-ease) forwards;
  }
  .y-reveal[data-d="1"] { animation-delay: 80ms; }
  .y-reveal[data-d="2"] { animation-delay: 160ms; }
  .y-reveal[data-d="3"] { animation-delay: 240ms; }
  .y-reveal[data-d="4"] { animation-delay: 320ms; }
  .y-reveal[data-d="5"] { animation-delay: 440ms; }
  @keyframes y-reveal {
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .y-reveal { opacity: 1; transform: none; animation: none; }
  }

  /* Capability ticker — for spec lists */
  .y-ticker {
    font-family: var(--y-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--y-ink-2);
  }
  .y-ticker-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--y-rule);
  }
  .y-ticker-row:last-child { border-bottom: 1px solid var(--y-rule); }
  .y-ticker-row .y-ticker-id { color: var(--y-mute); }
}


@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground transition-colors duration-300;
  }
   /* Ensure all text elements use the font variable */
   body,h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, select, label {
    font-family: var(--font-family);
  }
}

@layer components {
  /* Theme-aware component styles */
  .themed-button {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-200;
    border-radius: calc(var(--radius));
    box-shadow: var(--shadow-sm);
  }

  .themed-button:hover {
    box-shadow: var(--shadow-md);
  }

  .themed-card {
    @apply bg-card text-card-foreground border border-border;
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: var(--shadow-md);
  }

  .themed-input {
    @apply bg-background border-input text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:border-transparent;
    border-radius: calc(var(--radius));
    transition: var(--transition-all);
  }

  .themed-modal {
    @apply bg-card text-card-foreground border border-border;
    border-radius: calc(var(--radius) * 2);
    box-shadow: var(--shadow-xl);
  }

  .themed-modal::backdrop {
    background: var(--modal-backdrop);
  }

  .themed-dropdown {
    background: var(--dropdown-background);
    @apply text-foreground border border-border z-50;
    border-radius: calc(var(--radius));
    box-shadow: var(--shadow-lg);
  }

  .themed-sidebar {
    background: var(--sidebar-background);
    color: var(--sidebar-foreground);
    border-color: var(--sidebar-border);
  }

  .themed-table-header {
    background: var(--table-header);
    @apply text-foreground;
  }

  .themed-code {
    background: var(--code-background);
    @apply text-foreground font-mono text-sm;
    border-radius: calc(var(--radius) * 0.5);
    padding: 0.25rem 0.5rem;
  }

  /* Brand gradient backgrounds */
  .bg-gradient-primary {
    background: var(--gradient-primary);
  }

  .bg-gradient-secondary {
    background: var(--gradient-secondary);
  }

  .bg-gradient-brand {
    background: var(--gradient-brand);
  }

  /* Theme-aware shadows */
  .shadow-themed-sm {
    box-shadow: var(--shadow-sm);
  }

  .shadow-themed-md {
    box-shadow: var(--shadow-md);
  }

  .shadow-themed-lg {
    box-shadow: var(--shadow-lg);
  }

  .shadow-themed-xl {
    box-shadow: var(--shadow-xl);
  }

  /* Interactive elements */
  .interactive-hover {
    @apply transition-all duration-200 hover:scale-105;
    transition: var(--transition-all);
  }

  .interactive-hover:hover {
    box-shadow: var(--shadow-lg);
  }

  /* Focus styles */
  .focus-themed:focus {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  /* Theme-specific border radius utilities */
  .rounded-themed {
    border-radius: calc(var(--radius));
  }

  .rounded-themed-lg {
    border-radius: calc(var(--radius) * 1.5);
  }

  .rounded-themed-xl {
    border-radius: calc(var(--radius) * 2);
  }

  /* Typography */
  .text-brand-primary {
    color: hsl(var(--brand-primary));
  }

  .text-brand-secondary {
    color: hsl(var(--brand-secondary));
  }

  .text-brand-accent {
    color: hsl(var(--brand-accent));
  }

  /* Semantic colors */
  .text-success {
    color: hsl(var(--success));
  }

  .text-warning {
    color: hsl(var(--warning));
  }

  .text-error {
    color: hsl(var(--error));
  }

  .text-info {
    color: hsl(var(--info));
  }

  .bg-success {
    background-color: hsl(var(--success));
  }

  .bg-warning {
    background-color: hsl(var(--warning));
  }

  .bg-error {
    background-color: hsl(var(--error));
  }

  .bg-info {
    background-color: hsl(var(--info));
  }
}