@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/**
 * Shinecode Design System
 * Brand primary: #CC2949 (used as accent, not dominant)
 */

:root {
  /* Brand Colors */
  --brand-50: #FDF1F3;
  --brand-100: #F8D9DF;
  --brand-200: #F2B8C3;
  --brand-300: #E7768A;
  --brand-400: #D94A65;
  --brand-500: #CC2949;
  --brand-600: #B52240;
  --brand-700: #9F1E38;
  --brand-800: #84182F;
  --brand-900: #6D1427;

  /* Neutral Colors */
  --ink: #211B1D;
  --muted: #756B6E;
  --background: #FFFCFA;
  --surface: #FFFFFF;
  --surface-soft: #F8F5F3;
  --border: #EAE4E1;
  --border-strong: #D7CFCC;

  /* Supporting Colors */
  --sage: #8FB8A7;
  --sage-soft: #EAF3EF;
  --peach: #F2B8A7;
  --peach-soft: #FCEAE5;

  /* Semantic Colors */
  --info: #4F73B8;
  --success: #168A5B;
  --warning: #B7791F;
  --error: #B42318;

  /* Elevation */
  --shadow-card: 0 1px 2px 0 rgb(28 25 23 / 0.04), 0 1px 3px 0 rgb(28 25 23 / 0.06);
  --shadow-elevated: 0 4px 12px -2px rgb(28 25 23 / 0.08), 0 12px 32px -8px rgb(28 25 23 / 0.12);
  --shadow-popover: 0 8px 24px -4px rgb(28 25 23 / 0.12), 0 20px 48px -12px rgb(28 25 23 / 0.18);
  --shadow-brand: 0 4px 14px -2px rgb(204 41 73 / 0.35);

  /* shadcn UI compatibility tokens */
  --card: #FFFFFF;
  --card-foreground: #211B1D;
  --popover: #FFFFFF;
  --popover-foreground: #211B1D;
  --primary: #CC2949;
  --primary-foreground: #FFFFFF;
  --secondary: #F8F5F3;
  --secondary-foreground: #211B1D;
  --muted-foreground: #756B6E;
  --accent: #FDF1F3;
  --accent-foreground: #CC2949;
  --destructive: #B42318;
  --destructive-foreground: #FFFFFF;
  --input: #EAE4E1;
  --ring: #CC2949;
}

.dark {
  /* Neutral Colors Dark */
  --ink: #F9FAFB;
  --muted: #9CA3AF;
  --background: #09090B;
  --surface: #121215;
  --surface-soft: #18181B;
  --border: #27272A;
  --border-strong: #3F3F46;

  /* Supporting Colors Dark */
  --sage-soft: #1A2E26;
  --peach-soft: #2E1F1A;

  /* Elevation Dark */
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --shadow-elevated: 0 4px 12px -2px rgb(0 0 0 / 0.5), 0 12px 32px -8px rgb(0 0 0 / 0.6);
  --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.6), 0 20px 48px -12px rgb(0 0 0 / 0.7);

  /* shadcn UI Dark tokens */
  --card: #121215;
  --card-foreground: #F9FAFB;
  --popover: #121215;
  --popover-foreground: #F9FAFB;
  --primary: #CC2949;
  --primary-foreground: #FFFFFF;
  --secondary: #18181B;
  --secondary-foreground: #F9FAFB;
  --muted-foreground: #9CA3AF;
  --accent: #27272A;
  --accent-foreground: #F472B6;
  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;
  --input: #27272A;
  --ring: #CC2949;
}

@theme inline {
  /* Brand Colors */
  --color-brand-50: var(--brand-50);
  --color-brand-100: var(--brand-100);
  --color-brand-200: var(--brand-200);
  --color-brand-300: var(--brand-300);
  --color-brand-400: var(--brand-400);
  --color-brand-500: var(--brand-500);
  --color-brand-600: var(--brand-600);
  --color-brand-700: var(--brand-700);
  --color-brand-800: var(--brand-800);
  --color-brand-900: var(--brand-900);

  /* Neutral Colors */
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-background: var(--background);
  --color-surface: var(--surface);
  --color-surface-soft: var(--surface-soft);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);

  /* shadcn UI Color mappings */
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Supporting Colors */
  --color-sage: var(--sage);
  --color-sage-soft: var(--sage-soft);
  --color-peach: var(--peach);
  --color-peach-soft: var(--peach-soft);

  /* Semantic Colors */
  --color-info: var(--info);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--error);

  /* Shadows */
  --shadow-card: var(--shadow-card);
  --shadow-elevated: var(--shadow-elevated);
  --shadow-popover: var(--shadow-popover);
  --shadow-brand: var(--shadow-brand);

  /* Typography */
  --font-sans: var(--font-geist-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --font-mono: var(--font-geist-mono, ui-monospace, SFMono-Regular, monospace);
}

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 5.5rem;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var(--background);
    color: var(--ink);
    font-family: var(--font-sans);
    overscroll-behavior-y: contain;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: var(--brand-100);
    color: var(--brand-900);
  }

  /* Accessible focus ring */
  :focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Scrollbar styling */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgb(28 25 23 / 0.18) transparent;
  }
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  *::-webkit-scrollbar-thumb {
    background: rgb(28 25 23 / 0.18);
    border-radius: 9999px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@keyframes marquee-infinite-ltr {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marquee-infinite-rtl {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.animate-infinite-ltr {
  animation: marquee-infinite-ltr var(--duration, 45s) linear infinite;
  will-change: transform;
}

.animate-infinite-rtl {
  animation: marquee-infinite-rtl var(--duration, 45s) linear infinite;
  will-change: transform;
}

/* Custom 30s infinite marquee carousel */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
  will-change: transform;
}

@layer utilities {
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0.75rem);
  }
}

/* Category Discovery 5-per-row fixed slider */
.category-card-slide {
  flex: 0 0 260px;
  min-width: 260px;
  max-width: 260px;
  height: 360px;
}

@media (min-width: 640px) {
  .category-card-slide {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
    height: 380px;
  }
}

@media (min-width: 1024px) {
  .category-card-slide {
    flex: 0 0 calc((100% - 64px) / 5);
    min-width: calc((100% - 64px) / 5);
    max-width: calc((100% - 64px) / 5);
    height: 380px;
  }
}