/* Global CSS Theme Variables and Tailwind Imports */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font faces are loaded via next/font or local assets in portal layouts.
   Avoid external @import here to keep this shared CSS CSP-friendly. */
@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222 47% 8%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 8%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 8%;

    --primary: 213 100% 39%;
    --primary-foreground: 210 40% 98%;

    --secondary: 194 100% 47%;
    --secondary-foreground: 222 47% 11%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 20% 35%;

    --accent: 214 31.8182% 91.3725%;
    --accent-foreground: 222 47% 11%;
    --accent-dark: 214 32% 84%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --destructive-dark: 0 72% 51%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 217 91% 60%;

    --radius: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-lg: 0.5rem;
    --radius-md: calc(0.5rem - 2px);
    --radius-sm: calc(0.5rem - 4px);

    /* Original additional variables mapped if they were used in the app */
    --primary-dark: 213 100% 29%;
    --primary-light: 213 100% 49%;
    --secondary-dark: 194 100% 37%;
    --success-dark: 142 71% 35%;
    --warning-dark: 38 92% 40%;
    --info-dark: 180 100% 30%;
    --info: 180 100% 40%;
    --info-foreground: 0 0% 100%;

    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 215 25% 20%;
    --sidebar-primary: 217 91% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 217 91% 60%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 214 32% 91%;
    --sidebar-ring: 217 91% 60%;
    --sidebar-muted: 215 20% 45%;

    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    /* Cyan brand tokens — Phase 4 */
    --cyan:        191 92% 52%;
    --cyan-dark:   191 88% 42%;
    --cyan-tint:   191 65% 93%;

    /* Chart categorical colour tokens — Phase 4 */
    --chart-1: 294 100% 28%;
    --chart-2:  52 100% 44%;
    --chart-3: 205  80% 60%;
    --chart-4: 315  80% 47%;
    --chart-5:  25  95% 53%;
    --chart-6: 263  83% 58%;
    --chart-7: 292  84% 49%;
    --chart-8: 221  83% 53%;

    --gradient-from: hsl(218, 95%, 30%);
    --gradient-to:   hsl(213, 100%, 50%);

    /* Gradient tokens */
    --gradient-page:          linear-gradient(135deg, hsl(210,60%,99%) 0%, hsl(213,70%,97%) 50%, hsl(216,60%,95%) 100%);
    --gradient-primary:       linear-gradient(135deg, hsl(191,92%,52%) 0%, hsl(213,100%,44%) 60%, hsl(213,100%,29%) 100%);
    --gradient-primary-hover: linear-gradient(135deg, hsl(191,88%,58%) 0%, hsl(213,100%,48%) 60%, hsl(213,100%,34%) 100%);
    --gradient-subtle:        linear-gradient(180deg, hsl(210,50%,99%) 0%, hsl(213,45%,96%) 100%);
    --gradient-orb:           radial-gradient(circle, hsl(213,100%,60%) 0%, hsl(215,100%,44%) 100%);
    --gradient-bar:           linear-gradient(180deg, hsl(213,95%,58%) 0%, hsl(215,100%,44%) 100%);

    /* Shadow tokens */
    --shadow-xs:     0 1px 2px 0 hsl(220 85% 12% / 0.04);
    --shadow-sm:     0 1px 3px 0 hsl(220 85% 12% / 0.06), 0 1px 2px -1px hsl(220 85% 12% / 0.04);
    --shadow-md:     0 4px 12px -2px hsl(220 85% 12% / 0.08), 0 2px 4px -2px hsl(220 85% 12% / 0.04);
    --shadow-lg:     0 8px 24px -4px hsl(220 85% 12% / 0.10), 0 4px 8px -4px hsl(220 85% 12% / 0.06);
    --shadow-xl:     0 20px 40px -8px hsl(220 85% 12% / 0.12);
    --shadow-glow:   0 0 24px -4px hsl(215 100% 44% / 0.30);
    --shadow-glow-sm: 0 0 12px -2px hsl(215 100% 44% / 0.25);

    /* Transition tokens */
    --transition-fast: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition:      all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

    --font-sans:
      var(--font-inter, Inter), ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
      Segoe UI Symbol, Noto Color Emoji;
  }

  .dark {
    --background: 220 31% 16%;
    --foreground: 210 40% 96%;

    --card: 218 28% 22%;
    --card-foreground: 210 40% 96%;

    --popover: 218 28% 22%;
    --popover-foreground: 210 40% 96%;

    --primary: 212 100% 61%;
    --primary-foreground: 0 0% 100%;

    --secondary: 218 24% 24%;
    --secondary-foreground: 210 40% 96%;

    --muted: 219 23% 26%;
    --muted-foreground: 214 22% 78%;

    --accent: 218 24% 30%;
    --accent-foreground: 210 40% 96%;
    --accent-dark: 218 24% 36%;

    --destructive: 0 75% 56%;
    --destructive-foreground: 0 0% 100%;
    --destructive-dark: 0 70% 50%;

    --border: 218 18% 34%;
    --input: 218 18% 34%;
    --ring: 212 96% 68%;

    --primary-dark: 212 94% 54%;
    --primary-light: 212 100% 70%;
    --secondary-dark: 218 24% 18%;
    --success-dark: 142 69% 36%;
    --warning-dark: 38 90% 46%;
    --info-dark: 193 90% 45%;
    --info: 193 95% 52%;
    --info-foreground: 0 0% 100%;

    --sidebar-background: 220 38% 14%;
    --sidebar-foreground: 213 26% 84%;
    --sidebar-primary: 212 100% 61%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 218 26% 22%;
    --sidebar-accent-foreground: 210 40% 96%;
    --sidebar-border: 219 26% 24%;
    --sidebar-ring: 212 96% 68%;
    --sidebar-muted: 214 20% 68%;

    --success: 142 69% 46%;
    --success-foreground: 0 0% 100%;

    --warning: 38 90% 56%;
    --warning-foreground: 0 0% 100%;

    /* Cyan brand tokens — lightened for dark backgrounds */
    --cyan:        191 85% 65%;
    --cyan-dark:   191 80% 55%;
    --cyan-tint:   191 40% 20%;

    /* Chart categorical tokens — increased lightness for dark backgrounds */
    --chart-1: 294  80% 65%;
    --chart-2:  52  95% 58%;
    --chart-3: 205  75% 68%;
    --chart-4: 315  75% 62%;
    --chart-5:  25  90% 62%;
    --chart-6: 263  78% 68%;
    --chart-7: 292  78% 62%;
    --chart-8: 221  78% 65%;

    --font-sans:
      var(--font-inter, Inter), ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
      Segoe UI Symbol, Noto Color Emoji;
  }
}

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

  body {
    @apply text-foreground font-sans antialiased;
    background: var(--gradient-page);
    background-attachment: fixed;
    min-height: 100vh;
  }
}

@layer utilities {
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}