/* ========== PROTOTYPER UI TOKENS START ========== */

/* ============================================
   TAILWIND THEME REGISTRATION
   All tokens registered here generate utilities:
   --color-* → bg-*, text-*, border-*
   --shadow-* → shadow-*
   --ease-* → ease-*
   --radius-* → rounded-*
   --animate-* → animate-*
   ============================================ */

@theme {
  /* --- Font families --- */
  --font-sans: var(--font-geist-sans);
  --font-heading: var(--font-overpass);
  --font-mono: var(--font-geist-mono);
  --font-pixel: var(--font-geist-pixel-square);

  /* --- Radius scale --- */
  --radius-xl: calc(var(--radius) + 4px);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* --- Base colors --- */
  --color-background: oklch(var(--background));
  --color-foreground: oklch(var(--foreground));
  --color-border: oklch(var(--border));
  --color-border-light: oklch(var(--border-light));
  --color-border-dark: oklch(var(--border-dark));
  --color-input: oklch(var(--input));
  --color-ring: oklch(var(--ring));

  /* --- Primary --- */
  --color-primary: oklch(var(--primary));
  --color-primary-foreground: oklch(var(--primary-foreground));
  --color-primary-light: oklch(var(--primary-light));
  --color-primary-middle: oklch(var(--primary-middle));
  --color-primary-dark: oklch(var(--primary-dark));

  /* --- Secondary --- */
  --color-secondary: oklch(var(--secondary));
  --color-secondary-foreground: oklch(var(--secondary-foreground));

  /* --- Muted --- */
  --color-muted: oklch(var(--muted));
  --color-muted-foreground: oklch(var(--muted-foreground));

  /* --- Accent --- */
  --color-accent: oklch(var(--accent));
  --color-accent-foreground: oklch(var(--accent-foreground));

  /* --- Destructive --- */
  --color-destructive: oklch(var(--destructive));
  --color-destructive-foreground: oklch(var(--destructive-foreground));

  /* --- Status --- */
  --color-success: oklch(var(--success));
  --color-success-foreground: oklch(var(--success-foreground));
  --color-warning: oklch(var(--warning));
  --color-warning-foreground: oklch(var(--warning-foreground));
  --color-info: oklch(var(--info));
  --color-info-foreground: oklch(var(--info-foreground));

  /* --- Surfaces --- */
  --color-popover: oklch(var(--popover));
  --color-popover-foreground: oklch(var(--popover-foreground));
  --color-card: oklch(var(--card));
  --color-card-foreground: oklch(var(--card-foreground));
  --color-surface: oklch(var(--surface));
  --color-surface-foreground: oklch(var(--surface-foreground));
  --color-surface-secondary: var(--surface-secondary);
  --color-surface-tertiary: var(--surface-tertiary);
  --color-overlay: oklch(var(--overlay));
  --color-overlay-foreground: oklch(var(--overlay-foreground));

  /* --- Field --- */
  --color-field-background: oklch(var(--field-background));
  --color-field-border: var(--field-border);
  --color-field-border-hover: var(--field-border-hover);
  --color-field-border-invalid: var(--field-border-invalid);

  /* --- Derived interaction colors (auto-adapt in dark mode) --- */
  --color-primary-hover: var(--primary-hover);
  --color-destructive-hover: var(--destructive-hover);
  --color-success-hover: var(--success-hover);
  --color-warning-hover: var(--warning-hover);
  --color-accent-hover: var(--accent-hover);
  --color-primary-soft: var(--primary-soft);
  --color-primary-soft-hover: var(--primary-soft-hover);
  --color-destructive-soft: var(--destructive-soft);
  --color-destructive-soft-hover: var(--destructive-soft-hover);

  /* --- Shadows (3 semantic tiers, mode-adaptive via .dark override) --- */
  --shadow-surface: 0 2px 4px 0 oklch(0% 0 0 / 0.04), 0 1px 2px 0 oklch(0% 0 0 / 0.06), 0 0 0 1px oklch(0% 0 0 / 0.04);
  --shadow-field: 0 1px 2px 0 oklch(0% 0 0 / 0.05), 0 0 0 1px oklch(0% 0 0 / 0.04);
  --shadow-overlay: 0 8px 30px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06), 0 0 0 1px oklch(0% 0 0 / 0.06);

  /* --- Easing scale --- */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  /* --- Keyframe animations --- */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from { height: 0; }
    to { height: var(--accordion-content-height); }
  }
  @keyframes accordion-up {
    from { height: var(--accordion-content-height); }
    to { height: 0; }
  }
}

/* ============================================
   COLOR TOKENS — Light Mode (OKLCH)
   ============================================ */

:root {
  /* Font overrides — must be outside @theme to beat Tailwind's unlayered defaults */
  --font-sans: var(--font-geist-sans);
  --font-heading: var(--font-overpass);

  /* Base */
  --background: 100% 0 0;
  --foreground: 14.05% 0.004 285.8;
  --radius: 0.5rem;

  /* Cards & Popovers */
  --card: 98.48% 0 0;
  --card-foreground: 14.05% 0.004 285.8;
  --popover: 100% 0 0;
  --popover-foreground: 14.05% 0.004 285.8;

  /* Primary ramp — metallic zinc */
  --primary: 44% 0.017 286;
  --primary-light: 87% 0.006 286;
  --primary-middle: 55% 0.016 286;
  --primary-dark: 37% 0.016 286;
  --primary-foreground: 100% 0 0;

  /* Secondary */
  --secondary: 97% 0.003 265;
  --secondary-foreground: 21% 0.006 286;

  /* Muted */
  --muted: 96.76% 0 0;
  --muted-foreground: 55.19% 0.014 285.9;

  /* Accent */
  --accent: 96.76% 0 0;
  --accent-foreground: 21.03% 0.006 285.9;

  /* Destructive */
  --destructive: 63.68% 0.208 25.3;
  --destructive-foreground: 98.43% 0 0;

  /* Status */
  --success: 72.05% 0.192 149.5;
  --success-foreground: 100% 0 0;
  --warning: 76.97% 0.165 70.6;
  --warning-foreground: 0% 0 0;
  --info: 62.61% 0.186 259.6;
  --info-foreground: 100% 0 0;

  /* Borders & Input */
  --border: 91.97% 0.004 286.3;
  --border-light: 96.01% 0 0;
  --border-dark: 79.59% 0.011 286.2;
  --input: 91.97% 0.004 286.3;
  --ring: 44% 0.017 286;

  /* Surfaces */
  --surface: 98.48% 0 0;
  --surface-foreground: 14.05% 0.004 285.8;
  --surface-secondary: color-mix(in oklab, oklch(var(--surface)) 94%, oklch(var(--surface-foreground)) 6%);
  --surface-tertiary: color-mix(in oklab, oklch(var(--surface)) 88%, oklch(var(--surface-foreground)) 12%);
  --overlay: 100% 0 0;
  --overlay-foreground: 14.05% 0.004 285.8;

  /* Field */
  --field-background: 100% 0 0;
  --field-border: oklch(0% 0 0 / 0.12);
  --field-border-hover: oklch(0% 0 0 / 0.22);
  --field-border-invalid: oklch(var(--destructive));

  /* Derived: semantic hover (90% base + 10% paired foreground) */
  --primary-hover: color-mix(in oklab, oklch(var(--primary)) 90%, oklch(var(--primary-foreground)) 10%);
  --destructive-hover: color-mix(in oklab, oklch(var(--destructive)) 90%, oklch(var(--destructive-foreground)) 10%);
  --success-hover: color-mix(in oklab, oklch(var(--success)) 90%, oklch(var(--success-foreground)) 10%);
  --warning-hover: color-mix(in oklab, oklch(var(--warning)) 90%, oklch(var(--warning-foreground)) 10%);

  /* Derived: neutral hover (92% base + 8% paired foreground) */
  --accent-hover: color-mix(in oklab, oklch(var(--accent)) 92%, oklch(var(--accent-foreground)) 8%);

  /* Derived: soft variants (color on transparent) */
  --primary-soft: color-mix(in oklab, oklch(var(--primary)) 15%, transparent);
  --primary-soft-hover: color-mix(in oklab, oklch(var(--primary)) 20%, transparent);
  --destructive-soft: color-mix(in oklab, oklch(var(--destructive)) 15%, transparent);
  --destructive-soft-hover: color-mix(in oklab, oklch(var(--destructive)) 20%, transparent);
}

/* ============================================
   COLOR TOKENS — Dark Mode (OKLCH)
   ============================================ */

.dark {
  /* Base */
  --background: 14.05% 0.004 285.8;
  --foreground: 98.48% 0 0;

  /* Cards & Popovers */
  --card: 16.30% 0.006 285.7;
  --card-foreground: 98.48% 0 0;
  --popover: 14.05% 0.004 285.8;
  --popover-foreground: 98.48% 0 0;

  /* Primary ramp — metallic zinc (brighter for dark bg) */
  --primary: 55% 0.016 286;
  --primary-light: 87% 0.006 286;
  --primary-middle: 71% 0.015 286;
  --primary-dark: 44% 0.017 286;
  --primary-foreground: 100% 0 0;

  /* Secondary */
  --secondary: 27% 0.006 286;
  --secondary-foreground: 97% 0.003 265;

  /* Muted */
  --muted: 27.41% 0.006 286.0;
  --muted-foreground: 71.19% 0.013 286.1;

  /* Accent */
  --accent: 27.41% 0.006 286.0;
  --accent-foreground: 98.48% 0 0;

  /* Destructive */
  --destructive: 39.59% 0.133 25.7;
  --destructive-foreground: 98.43% 0 0;

  /* Status */
  --success: 79.99% 0.182 151.8;
  --success-foreground: 38.98% 0.089 152.7;
  --warning: 86.11% 0.173 92.0;
  --warning-foreground: 42.36% 0.091 56.8;
  --info: 62.61% 0.186 259.6;
  --info-foreground: 38.14% 0.136 265.3;

  /* Borders & Input */
  --border: 31.51% 0.007 286.0;
  --border-light: 37.27% 0.008 286.0;
  --border-dark: 23.37% 0.004 286.1;
  --input: 27.41% 0.006 286.0;
  --ring: 55% 0.016 286;

  /* Surfaces */
  --surface: 16.30% 0.006 285.7;
  --surface-foreground: 98.48% 0 0;
  --surface-secondary: color-mix(in oklab, oklch(var(--surface)) 94%, oklch(var(--surface-foreground)) 6%);
  --surface-tertiary: color-mix(in oklab, oklch(var(--surface)) 88%, oklch(var(--surface-foreground)) 12%);
  --overlay: 19.50% 0.008 285.7;
  --overlay-foreground: 98.48% 0 0;

  /* Field */
  --field-background: 16.30% 0.006 285.7;
  --field-border: oklch(100% 0 0 / 0.12);
  --field-border-hover: oklch(100% 0 0 / 0.22);
  --field-border-invalid: oklch(var(--destructive));

  /* Dark mode shadows — reduced, tonal contrast provides depth */
  --shadow-surface: none;
  --shadow-field: none;
  --shadow-overlay: 0 0 0 1px oklch(100% 0 0 / 0.08), 0 8px 30px oklch(0% 0 0 / 0.35);
}

/* ============================================
   CSS UTILITIES — Consistency Layer
   Every component references these instead of
   reimplementing focus/disabled/invalid patterns.
   ============================================ */

/* Focus ring for buttons, toggles, links, interactive elements */
@utility focus-ring {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Focus ring for form field groups — sits on border, no offset */
@utility focus-field-ring {
  outline: 2px solid var(--color-ring);
  outline-offset: -1px;
}

/* Invalid field outline — destructive border + ring on focus */
@utility invalid-field-ring {
  outline: 2px solid var(--color-destructive);
  outline-offset: -1px;
}

/* Disabled state — universal across all components */
@utility status-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Pending/loading state — non-interactive but visually unchanged */
@utility status-pending {
  pointer-events: none;
}

/* Remove tap highlight on mobile */
@utility no-highlight {
  -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbar while keeping scroll functionality */
@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================
   CUSTOM VARIANTS
   ============================================ */

/* Motion reduction — respects prefers-reduced-motion */
@custom-variant motion-reduce (@media (prefers-reduced-motion: reduce));
@custom-variant motion-safe (@media (prefers-reduced-motion: no-preference));

/* Hover gating — only applies hover styles on devices that support hover */
@custom-variant hover-only (@media (hover: hover));

/* ============================================
   BASE STYLES
   ============================================ */

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
  }
}

/* --- Inline code --- */
.prose :not(pre) > code {
  border: 1px solid oklch(var(--border));
  background: transparent;
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875em;
}

/* --- Prose headings — visual rhythm --- */
.prose h1 {
  @apply text-3xl font-bold tracking-tight mt-12 mb-4;
}

.prose h2 {
  @apply text-2xl font-semibold tracking-tight mt-12 mb-4;
}

.prose h3 {
  @apply text-xl font-semibold mt-8 mb-3;
}

.prose h4 {
  @apply text-base font-medium mt-6 mb-2;
}

/* ========== PROTOTYPER UI TOKENS END ========== */