@import "tailwindcss";
@import "../styles/tokens.css";

@theme {
  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);
  --color-accent-50: var(--color-accent-50);
  --color-accent-100: var(--color-accent-100);
  --color-accent-200: var(--color-accent-200);
  --color-accent-300: var(--color-accent-300);
  --color-accent-400: var(--color-accent-400);
  --color-accent-500: var(--color-accent-500);
  --color-accent-600: var(--color-accent-600);
  --color-accent-700: var(--color-accent-700);
  --color-accent-800: var(--color-accent-800);
  --color-accent-900: var(--color-accent-900);
  --color-neutral-0: var(--color-neutral-0);
  --color-neutral-50: var(--color-neutral-50);
  --color-neutral-100: var(--color-neutral-100);
  --color-neutral-200: var(--color-neutral-200);
  --color-neutral-300: var(--color-neutral-300);
  --color-neutral-400: var(--color-neutral-400);
  --color-neutral-500: var(--color-neutral-500);
  --color-neutral-600: var(--color-neutral-600);
  --color-neutral-700: var(--color-neutral-700);
  --color-neutral-800: var(--color-neutral-800);
  --color-neutral-900: var(--color-neutral-900);
  --color-neutral-950: var(--color-neutral-950);
  --color-success: var(--color-success);
  --color-warning: var(--color-warning);
  --color-danger: var(--color-danger);
  --color-info: var(--color-info);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
  --radius-2xl: var(--radius-2xl);
  --radius-full: var(--radius-full);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-floating: var(--shadow-floating);
  --font-heading: var(--font-sora), var(--font-noto-bengali), sans-serif;
  --font-body: var(--font-inter), var(--font-noto-bengali), sans-serif;
  --container-content: var(--container-max);
  --breakpoint-xs: 360px;
  --breakpoint-sm: 390px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;
  --breakpoint-3xl: 1920px;
}

@layer base {
  * {
    border-color: var(--border-default);
  }

  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  body {
    background: var(--surface-app);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::selection {
    background: var(--color-accent-200);
    color: var(--color-primary-900);
  }
}

@layer utilities {
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

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

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slide-in-right {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slide-out-right {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
  }

  .animate-fade-in {
    animation: fade-in 200ms var(--ease-out-soft) both;
  }

  .animate-fade-in-up {
    animation: fade-in-up 260ms var(--ease-out-soft) both;
  }

  .container-app {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .container-search {
    max-width: var(--container-search-max);
  }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--color-primary-700);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--radius-md) 0;
  }

  .skip-link:focus {
    left: 0;
  }
}

@media (min-width: 1024px) {
  .container-app {
    padding-inline: 2rem;
  }
}

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

:root {
  --color-primary-50: #e6f6fd;
  --color-primary-100: #ccecfb;
  --color-primary-200: #99d9f7;
  --color-primary-300: #5cc5f3;
  --color-primary-400: #00aeef;
  --color-primary-500: #0098d9;
  --color-primary-600: #0072bc;
  --color-primary-700: #005c96;
  --color-primary-800: #004670;
  --color-primary-900: #00304a;

  --color-accent-50: #e6f9ee;
  --color-accent-100: #ccf3dd;
  --color-accent-200: #99e7bb;
  --color-accent-300: #5cd792;
  --color-accent-400: #2ec378;
  --color-accent-500: #00a651;
  --color-accent-600: #008a44;
  --color-accent-700: #006e37;
  --color-accent-800: #00522a;
  --color-accent-900: #00361c;

  --color-neutral-0: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  --color-success: #00a651;
  --color-warning: #f59e0b;
  --color-danger: #ed1c24;
  --color-info: var(--color-accent-500);

  /* ---- Surface / text roles (dark-mode ready) ---- */
  --surface-app: var(--color-neutral-0);
  --surface-muted: var(--color-neutral-50);
  --surface-raised: var(--color-neutral-0);
  --surface-inverse: var(--color-neutral-900);

  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-muted: var(--color-neutral-500);
  --text-on-brand: var(--color-neutral-0);
  --text-link: var(--color-primary-700);

  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);

  /* ---- Radius scale ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---- Elevation (soft, layered — never stacked/excessive) ---- */
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 12px 24px -8px rgb(15 23 42 / 0.12), 0 4px 8px -4px rgb(15 23 42 / 0.06);
  --shadow-xl: 0 24px 48px -12px rgb(15 23 42 / 0.18), 0 8px 16px -8px rgb(15 23 42 / 0.08);
  --shadow-floating: 0 20px 40px -8px rgb(37 99 235 / 0.18);

  /* ---- Motion ---- */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---- Layout ---- */
  --header-height: 76px;
  --header-height-mobile: 64px;
  --container-max: 1600px;
  /* Homepage search must retain its original 1280px container width. */
  --container-search-max: 1280px;

  /* ---- Touch targets (mobile-first, WCAG 2.5.5 AAA = 44px min) ---- */
  --tap-target-min: 44px;
  --tap-target-comfortable: 48px;
}

/* Dark theme scaffold — flip on <html data-theme="dark"> once dark mode ships. */
[data-theme="dark"] {
  --surface-app: var(--color-neutral-950);
  --surface-muted: var(--color-neutral-900);
  --surface-raised: var(--color-neutral-800);
  --surface-inverse: var(--color-neutral-950);

  --text-primary: var(--color-neutral-50);
  --text-secondary: var(--color-neutral-300);
  --text-muted: var(--color-neutral-500);

  --border-default: var(--color-neutral-700);
  --border-strong: var(--color-neutral-600);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
button {
  border-radius: var(--radius-sm) !important;
}

[class*="rounded-"]:has(> input:not([type="checkbox"]):not([type="radio"])),
[class*="rounded-"]:has(> textarea),
[class*="rounded-"]:has(> select) {
  border-radius: var(--radius-sm) !important;
}