@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

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

@layer base {
  :root {
    /* KROW Official Brand Colors */
    /* Primary: KROW Blue #0A39DF (Pantone 286CP) */
    /* Accent: KROW Yellow #F9E547 (Pantone 106CP) */
    /* Pale Yellow: #F8E08E (Pantone 1205CP) */
    /* Dark Navy: #333F48 (Pantone 432CP) */
    /* Mint: #D1E0D7 (Pantone 621CP) */

    --background: 150 10% 96%;
    --foreground: 210 17% 24%;
    --card: 0 0% 100%;
    --card-foreground: 210 17% 24%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 17% 24%;
    --primary: 229 89% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 224 89% 96%;
    --secondary-foreground: 224 89% 30%;
    --muted: 150 10% 93%;
    --muted-foreground: 210 10% 46%;
    --accent: 224 89% 94%;
    --accent-foreground: 224 89% 25%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 150 8% 87%;
    --input: 150 8% 87%;
    --ring: 229 89% 45%;
    --chart-1: 229 89% 45%;
    --chart-2: 52 91% 63%;
    --chart-3: 210 17% 24%;
    --chart-4: 42 73% 74%;
    --chart-5: 150 16% 84%;
    --radius: 0.75rem;
    --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* ── Design system tokens ───────────────────────────────────────────
       Everything below is consumed through Tailwind (see tailwind.config.js)
       rather than referenced as raw CSS in components. */

    /* Semantic status — used by StatusBadge, Alert, KpiCard trends */
    --success: 142 71% 36%;
    --success-foreground: 0 0% 100%;
    --success-muted: 142 60% 95%;
    --warning: 32 95% 44%;
    --warning-foreground: 0 0% 100%;
    --warning-muted: 40 96% 94%;
    --info: 229 89% 45%;
    --info-foreground: 0 0% 100%;
    --info-muted: 224 89% 96%;
    --neutral: 210 17% 24%;
    --neutral-foreground: 0 0% 100%;
    --neutral-muted: 210 12% 94%;
    --destructive-muted: 0 86% 97%;

    /* Ink scale — the text hierarchy every component uses */
    --ink-1: 222 47% 11%;   /* headings */
    --ink-2: 215 25% 27%;   /* body */
    --ink-3: 220 9% 46%;    /* secondary */
    --ink-4: 220 9% 64%;    /* placeholder / meta */

    /* Surfaces */
    --surface: 0 0% 100%;
    --surface-subtle: 210 20% 98%;
    --surface-sunken: 220 14% 96%;

    /* Elevation — a 4-step scale, tinted with brand blue not neutral black */
    --shadow-xs: 0 1px 2px 0 rgb(16 24 40 / 0.04);
    --shadow-sm: 0 1px 3px 0 rgb(16 24 40 / 0.06), 0 1px 2px -1px rgb(16 24 40 / 0.04);
    --shadow-md: 0 4px 12px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.04);
    --shadow-lg: 0 12px 28px -6px rgb(16 24 40 / 0.12), 0 4px 10px -4px rgb(16 24 40 / 0.06);
    --shadow-xl: 0 24px 56px -12px rgb(16 24 40 / 0.18), 0 8px 20px -8px rgb(16 24 40 / 0.08);
    --shadow-brand: 0 10px 30px -6px rgb(10 57 223 / 0.24), 0 2px 6px -2px rgb(51 63 72 / 0.08);
    --shadow-panel: 0 24px 64px -12px rgb(9 12 24 / 0.45), 0 8px 24px -8px rgb(9 12 24 / 0.30);

    /* Motion — one easing vocabulary across the app */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;

    /* Layout — the single container width every page shares */
    --container-max: 80rem;   /* 1280px — the dashboard's own measure */
    --container-wide: 108rem; /* 1728px — the shell, sized to fit the 380px
                                 assistant column beside a full-width dashboard */
    --page-gutter: 1.5rem;

    /* Owliver assistant panel — the one dark surface in the system */
    --panel: 222 47% 9%;
    --panel-raised: 222 40% 14%;
    --panel-border: 222 30% 22%;
    --panel-foreground: 210 20% 96%;
    --panel-muted: 217 15% 62%;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground font-body;
  }
}

@layer utilities {
  .glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }
  .glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
  .gradient-mesh {
    background-image:
      radial-gradient(at 15% 15%, rgba(10, 57, 223, 0.07) 0px, transparent 50%),
      radial-gradient(at 85% 5%, rgba(249, 229, 71, 0.12) 0px, transparent 50%),
      radial-gradient(at 75% 85%, rgba(10, 57, 223, 0.05) 0px, transparent 50%),
      radial-gradient(at 10% 90%, rgba(209, 224, 215, 0.20) 0px, transparent 50%);
  }
  .gradient-text {
    color: #0A39DF;
  }
  .glow-blue {
    box-shadow: 0 0 40px rgba(10, 57, 223, 0.15);
  }
  .glow-yellow {
    box-shadow: 0 0 40px rgba(249, 229, 71, 0.30);
  }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* The dark Owliver panel surface. Kept as a utility so the one AI component
     can never drift from the token. */
  .panel-surface {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 40%),
      hsl(var(--panel));
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
  }

  /* Scrollbar for dark surfaces — the default is invisible against the panel. */
  .panel-scroll::-webkit-scrollbar { width: 6px; }
  .panel-scroll::-webkit-scrollbar-track { background: transparent; }
  .panel-scroll::-webkit-scrollbar-thumb {
    background: hsl(var(--panel-border));
    border-radius: 9999px;
  }
  .panel-scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--panel-muted)); }

  /* Standard focus treatment. Applied by DS components so keyboard focus is
     identical everywhere and never relies on the browser default. */
  .focus-ring {
    @apply outline-none ring-offset-2 ring-offset-background
           focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60;
  }
  .focus-ring-inset {
    @apply outline-none focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60;
  }

  /* Skeleton shimmer — a moving highlight reads as loading far better than a
     pulsing block, especially on the glass surfaces. */
  .shimmer {
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.65) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s var(--ease-in-out) infinite;
  }

  /* Text truncation past one line — Tailwind has line-clamp, this keeps the
     DS API consistent with `truncate`. */
  .truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@layer base {
  /* Respect reduced-motion globally rather than per component. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}