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

@layer base {
  :root {
    /* BlackRoad OS Dark Theme (Default) */
    --background: 225 60% 2%;           /* #02030A - br-black */
    --foreground: 0 0% 100%;            /* #FFFFFF - br-white */
    --card: 225 48% 5%;                 /* #050816 - br-bg-elevated */
    --card-foreground: 0 0% 100%;       /* #FFFFFF */
    --popover: 225 54% 8%;              /* #090C1F - br-bg-alt */
    --popover-foreground: 0 0% 100%;    /* #FFFFFF */

    /* Primary: BlackRoad gradient mid (magenta) */
    --primary: 328 100% 65%;            /* #FF4FA3 - br-mid */
    --primary-foreground: 0 0% 100%;    /* #FFFFFF */

    /* Secondary: Elevated background */
    --secondary: 225 48% 5%;            /* #050816 */
    --secondary-foreground: 0 0% 100%;  /* #FFFFFF */

    /* Muted: BlackRoad muted text */
    --muted: 225 54% 8%;                /* #090C1F - bg for muted */
    --muted-foreground: 225 25% 72%;    /* #A7B0C7 - br-muted */

    /* Accent: BlackRoad cool (electric blue) */
    --accent: 216 100% 60%;             /* #327CFF - br-cool */
    --accent-foreground: 0 0% 100%;     /* #FFFFFF */

    /* Destructive: BlackRoad error */
    --destructive: 348 100% 64%;        /* #FF4477 - br-error */
    --destructive-foreground: 0 0% 100%;/* #FFFFFF */

    /* Borders and inputs */
    --border: 225 54% 15%;              /* Slightly lighter than bg */
    --input: 225 54% 15%;               /* Match border */
    --ring: 328 100% 65%;               /* Match primary */

    /* Border radius - BlackRoad standard */
    --radius: 16px;
  }

  .light {
    /* Light mode (optional, not BlackRoad default) */
    --background: 0 0% 100%;
    --foreground: 225 60% 2%;
    --card: 0 0% 98%;
    --card-foreground: 225 60% 2%;
    --popover: 0 0% 100%;
    --popover-foreground: 225 60% 2%;
    --primary: 328 100% 65%;
    --primary-foreground: 0 0% 100%;
    --secondary: 225 20% 95%;
    --secondary-foreground: 225 60% 2%;
    --muted: 225 20% 95%;
    --muted-foreground: 225 25% 40%;
    --accent: 216 100% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 348 100% 64%;
    --destructive-foreground: 0 0% 100%;
    --border: 225 20% 90%;
    --input: 225 20% 90%;
    --ring: 328 100% 65%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer utilities {
  /* BlackRoad gradient utilities */
  .bg-gradient-br {
    background: linear-gradient(135deg, #FF9A3C 0%, #FF4FA3 50%, #327CFF 100%);
  }

  .bg-gradient-br-warm {
    background: linear-gradient(135deg, #FF9D00 0%, #FF6B00 33%, #FF0066 66%, #FF006B 100%);
  }

  .bg-gradient-br-cool {
    background: linear-gradient(135deg, #FF006B 0%, #D600AA 33%, #7700FF 66%, #0066FF 100%);
  }

  .text-gradient-br {
    background: linear-gradient(135deg, #FF9A3C 0%, #FF4FA3 50%, #327CFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* BlackRoad border glow effect */
  .border-glow-br {
    box-shadow: 0 0 20px rgba(255, 79, 163, 0.3);
  }
}