/**
 * FormPacer Design Tokens
 * Adapted from LogPacer's "Playful Precision" design system.
 * OKLCH color space for perceptual uniformity.
 */

:root {
  /* Spacing */
  --space-breath: 0.5rem;
  --space-comfort: 1rem;
  --space-generous: 1.5rem;
  --space-luxurious: 3rem;

  /* Motion */
  --motion-instant: 50ms;
  --motion-micro: 150ms;
  --motion-gentle: 300ms;
  --motion-deliberate: 500ms;

  /* Easing */
  --ease-natural: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Typography */
  --font-family-sans: "Noto Sans", "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  /* Elevation */
  --elevation-raised: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --elevation-floating: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Brand - Steel Blue axis */
  --brand-primary: oklch(52% 0.06 220);

  /* Semantic colors */
  --color-success: oklch(61% 0.15 155);
  --color-warning: oklch(63% 0.17 55);
  --color-error: oklch(58% 0.19 25);
  --color-info: oklch(60% 0.10 210);

  --color-error-50: oklch(97% 0.035 25);
  --color-error-100: oklch(94% 0.07 25);
  --color-error-500: oklch(58% 0.19 25);
  --color-error-600: oklch(50% 0.17 25);

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-base: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Light mode surfaces & text */
  --color-background: oklch(98% 0 0);
  --color-surface: oklch(100% 0 0);
  --color-surface-hover: oklch(99% 0 0);

  --color-text-primary: oklch(25% 0.02 220);
  --color-text-secondary: oklch(40% 0.02 220);
  --color-text-tertiary: oklch(55% 0.02 220);
  --color-text-disabled: oklch(70% 0.01 220);

  --color-border: oklch(85% 0.02 220);
  --color-border-hover: oklch(75% 0.03 220);
  --color-border-focus: var(--brand-primary);

  --color-button-primary-bg: var(--brand-primary);
  --color-button-primary-bg-hover: oklch(47% 0.06 220);
  --color-button-primary-text: oklch(97% 0 0);

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--brand-primary);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: oklch(18% 0 0);
    --color-surface: oklch(22% 0 0);
    --color-surface-hover: oklch(24% 0 0);

    --color-text-primary: oklch(92% 0.015 220);
    --color-text-secondary: oklch(80% 0.015 220);
    --color-text-tertiary: oklch(65% 0.015 220);
    --color-text-disabled: oklch(45% 0.01 220);

    --color-border: oklch(35% 0.02 220);
    --color-border-hover: oklch(45% 0.025 220);
    --color-border-focus: oklch(65% 0.08 220);

    --color-button-primary-bg: oklch(47% 0.06 220);
    --color-button-primary-bg-hover: oklch(52% 0.07 220);
    --color-button-primary-text: oklch(95% 0 0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}