/* ============================================================
   AniCal — Colors & Type Tokens
   Extracted from: nathan-pichon/AnimeCalendar (src/app/globals.css)
   Reference URL: https://app.anical.xyz
   --------------------------------------------------------------
   Notes:
   - AniCal is dark-mode-first. The :root values mirror the
     production .dark theme; a .light class is provided for
     completeness but the app never ships light mode by default.
   - All colors are expressed in OKLCH (perceptually uniform).
   - Glassmorphism, glow and aurora are first-class primitives.
   ============================================================ */

/* ---- Fonts: Google Fonts ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* === Brand ============================================== */
  --brand-purple:    oklch(0.62 0.26 293);   /* #8B5CF6 — primary */
  --brand-cyan:      oklch(0.65 0.17 195);   /* #06B6D4 — accent  */
  --brand-gradient:  linear-gradient(135deg, oklch(0.62 0.26 293) 0%, oklch(0.65 0.17 195) 100%);

  /* === Surface (dark, default) ============================ */
  --background:        oklch(0.1  0.005 285);   /* ~#050510 — deep ink */
  --foreground:        oklch(0.985 0    0   );  /* off-white          */
  --card:              oklch(0.16 0.008 285);   /* card lift          */
  --card-foreground:   oklch(0.985 0    0   );
  --popover:           oklch(0.16 0.008 285);
  --popover-foreground:oklch(0.985 0    0   );

  --secondary:         oklch(0.22 0.01  285);
  --secondary-foreground: oklch(0.985 0 0);
  --muted:             oklch(0.22 0.01  285);
  --muted-foreground:  oklch(0.65 0    0   );

  --border: oklch(1 0 0 / 8%);
  --input:  oklch(1 0 0 / 12%);

  /* === Primary / Accent =================================== */
  --primary:               oklch(0.62 0.26 293);
  --primary-foreground:    oklch(0.985 0 0);
  --accent:                oklch(0.65 0.17 195);
  --accent-foreground:     oklch(0.985 0 0);
  --ring:                  oklch(0.62 0.26 293);
  --destructive:           oklch(0.704 0.191 22.216);

  /* === Anime semantic colors (custom) ===================== */
  --airing:      oklch(0.72 0.19 145);   /* green — airing now      */
  --airing-soon: oklch(0.80 0.16 80);    /* amber — airing soon     */
  --neon-pink:   oklch(0.72 0.18 350);   /* hot pink — favorites    */
  --glow:        oklch(0.62 0.26 293 / 25%);

  /* === Glass ============================================== */
  --glass:        oklch(1 0 0 / 3%);
  --glass-border: oklch(1 0 0 / 8%);
  --glass-strong-bg: oklch(0.1 0.005 285 / 80%);

  /* === Sidebar ============================================ */
  --sidebar:                     oklch(0.14 0.008 285);
  --sidebar-foreground:          oklch(0.985 0 0);
  --sidebar-primary:             oklch(0.62 0.26 293);
  --sidebar-primary-foreground:  oklch(0.985 0 0);
  --sidebar-accent:              oklch(0.22 0.01 285);
  --sidebar-accent-foreground:   oklch(0.985 0 0);
  --sidebar-border:              oklch(1 0 0 / 8%);
  --sidebar-ring:                oklch(0.62 0.26 293);

  /* === Charts ============================================= */
  --chart-1: oklch(0.62 0.26 293);   /* purple */
  --chart-2: oklch(0.65 0.17 195);   /* cyan   */
  --chart-3: oklch(0.72 0.18 350);   /* pink   */
  --chart-4: oklch(0.75 0.16 145);   /* green  */
  --chart-5: oklch(0.65 0.22 30);    /* orange */

  /* === Streaming platform brand colors ==================== */
  --platform-crunchyroll: #F47521;
  --platform-netflix:     #E50914;
  --platform-adn:         #0096DB;
  --platform-disney:      #113CCF;
  --platform-funimation:  #5B0BB5;
  --platform-hulu:        #1CE783;
  --platform-prime:       #00A8E1;
  --platform-hidive:      #00BAFF;
  --platform-wakanim:     #E4002B;
  --platform-bilibili:    #00A1D6;
  --platform-anilist:     #02A9FF;
  --platform-mal:         #2E51A2;

  /* === Radii — based on 0.75rem ============================ */
  --radius:    0.75rem;
  --radius-sm: 0.45rem;   /* radius * 0.6 */
  --radius-md: 0.60rem;   /* radius * 0.8 */
  --radius-lg: 0.75rem;
  --radius-xl: 1.05rem;   /* radius * 1.4 */
  --radius-2xl: 1.35rem;  /* radius * 1.8 — anime card / glass surfaces */
  --radius-3xl: 1.65rem;  /* bottom nav, pills */
  --radius-4xl: 1.95rem;

  /* === Spacing scale (Tailwind v4 defaults; we keep them) === */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* === Shadow & Glow ====================================== */
  --shadow-glow:    0 0 20px var(--glow), 0 0 60px oklch(0.62 0.26 293 / 10%);
  --shadow-glow-sm: 0 0 10px var(--glow);
  --shadow-card:    0 4px 24px -8px oklch(0 0 0 / 50%);
  --shadow-nav:     0 8px 32px -8px oklch(0 0 0 / 40%);

  /* === Typography — families ============================== */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* === Typography — semantic ============================== */
  --text-display:  900 2.5rem/1.05 var(--font-heading);   /* hero/title */
  --text-h1:       800 1.75rem/1.1  var(--font-heading);
  --text-h2:       700 1.25rem/1.2  var(--font-heading);
  --text-h3:       700 1.125rem/1.25 var(--font-heading);
  --text-h4:       600 1rem/1.3     var(--font-heading);
  --text-body:     400 0.875rem/1.5 var(--font-sans);    /* 14px default body */
  --text-body-md:  400 1rem/1.5     var(--font-sans);
  --text-small:    500 0.75rem/1.4  var(--font-sans);    /* 12px meta */
  --text-tiny:     500 0.625rem/1.3 var(--font-sans);    /* 10px badge label */
  --text-mono:     600 0.75rem/1.4  var(--font-mono);    /* countdown */

  /* === Motion ============================================= */
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      150ms;
  --dur-base:      200ms;
  --dur-slow:      400ms;
}

/* Light theme exists in source but app forces .dark on <html>;
   we keep it for reference but never default to it. */
.light {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --secondary: oklch(0.97 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --input:  oklch(0.922 0 0);
  --primary: oklch(0.541 0.281 293);
  --accent:  oklch(0.65 0.15 195);
  --glass: oklch(1 0 0 / 5%);
  --glass-border: oklch(1 0 0 / 10%);
}

/* ---- Element defaults ----------------------------------- */
body {
  background: var(--background);
  color: var(--foreground);
  font: var(--text-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}
h1 { font: var(--text-h1); letter-spacing: -0.01em; }
h2 { font: var(--text-h2); letter-spacing: -0.005em; }
h3 { font: var(--text-h3); }
h4 { font: var(--text-h4); }
code, kbd, .mono { font: var(--text-mono); }

/* ---- Utility classes (mirror production globals.css) ---- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
}
.glass-strong {
  background: var(--glass-strong-bg);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid var(--glass-border);
}
.glow    { box-shadow: var(--shadow-glow); }
.glow-sm { box-shadow: var(--shadow-glow-sm); }

/* Aurora — fixed inset, ambient drift behind everything */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; width: 60vmax; height: 60vmax;
  border-radius: 50%; filter: blur(100px); opacity: 0.08;
  animation: aurora-drift 20s ease-in-out infinite alternate;
}
.aurora::before { background: var(--brand-purple); top: -20%; left: -10%; }
.aurora::after  { background: var(--brand-cyan);   bottom: -20%; right: -10%; animation-delay: -10s; }
@keyframes aurora-drift {
  0%   { transform: translate(0,0)      scale(1); }
  33%  { transform: translate(5%, 10%)  scale(1.1); }
  66%  { transform: translate(-5%,-5%)  scale(0.95); }
  100% { transform: translate(3%, -8%)  scale(1.05); }
}

/* Noise — fixed overlay at 1.5% opacity */
.noise::before {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Airing pulse — used on the green "airing now" indicator */
.airing-pulse { animation: airing-pulse 2s ease-in-out infinite; }
@keyframes airing-pulse {
  0%, 100% { box-shadow: 0 0 0 0   oklch(0.72 0.19 145 / 40%); }
  50%      { box-shadow: 0 0 0 8px oklch(0.72 0.19 145 / 0%); }
}

/* Shimmer — skeleton loaders */
.shimmer {
  background: linear-gradient(90deg, oklch(1 0 0 / 0%) 0%, oklch(1 0 0 / 5%) 50%, oklch(1 0 0 / 0%) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Scrollbar hidden — used on horizontal day strips & tabs */
.scrollbar-hidden { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hidden::-webkit-scrollbar { display: none; }