/**
 * Pufaan design tokens — derived from design-system.md (locked).
 * Do not redefine these values in component CSS.
 */

:root {
  color-scheme: light;

  /* Primary */
  --color-primary: #0f0f0f;
  --color-primary-hover: #2a2a2a;
  --color-primary-active: #000000;
  --color-on-primary: #ffffff;

  /* Surfaces */
  --color-white: #ffffff;
  --color-secondary: #f7f5f2;
  --color-secondary-muted: #f0ede8;
  --color-bg-canvas: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f7f5f2;

  /* Neutrals */
  --color-gray-50: #fafaf9;
  --color-gray-100: #f4f4f3;
  --color-gray-200: #e8e8e6;
  --color-gray-300: #d4d4d1;
  --color-gray-400: #a3a3a0;
  --color-gray-500: #737370;
  --color-gray-600: #52524f;
  --color-gray-700: #3d3d3a;
  --color-gray-800: #262624;
  --color-gray-900: #141413;
  --color-gray-950: #0a0a09;

  /* Text */
  --color-text-primary: #0f0f0f;
  --color-text-secondary: #52524f;
  --color-text-tertiary: #737370;
  --color-text-disabled: #a3a3a0;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border-subtle: #e8e8e6;
  --color-border-default: #d4d4d1;
  --color-border-strong: #a3a3a0;
  --color-border-focus: #0f0f0f;
  --color-border-error: #b42318;
  --color-border-success: #1a7a4c;

  /* Links */
  --color-link: #1a5c45;
  --color-link-hover: #0f3d2e;
  --color-link-visited: #3d5a4f;
  --color-link-underline: rgba(26, 92, 69, 0.35);

  /* Status */
  --color-success: #1a7a4c;
  --color-success-bg: #e8f5ee;
  --color-success-border: #a8d5bc;
  --color-warning: #9a6700;
  --color-warning-bg: #fbf3e0;
  --color-warning-border: #e8c97a;
  --color-error: #b42318;
  --color-error-bg: #fdecea;
  --color-error-border: #f0b4ae;

  /* Hover / focus */
  --color-hover-surface: #f4f4f3;
  --color-hover-surface-strong: #e8e8e6;
  --color-hover-overlay: rgba(15, 15, 15, 0.04);
  --color-secondary-btn-hover: #f0ede8;
  --color-focus-ring: #0f0f0f;

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-display: 2.5rem;
  --text-h1: 2rem;
  --text-h2: 1.75rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-h5: 1rem;
  --text-body-lg: 1rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --text-button: 0.875rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* Spacing */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(15, 15, 15, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 15, 15, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 15, 15, 0.08);
  --shadow-focus: 0 0 0 3px rgba(15, 15, 15, 0.15);

  /* Motion */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1440px;
  --gutter: 16px;
  --header-height: 64px;
  --grid-columns: 4;
  --grid-gutter: 16px;
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-skip-link: 300;
}

@media (min-width: 768px) {
  :root {
    --text-display: 3rem;
    --text-h1: 2.5rem;
    --text-h2: 2rem;
    --text-h3: 1.5rem;
    --text-h4: 1.25rem;
    --text-h5: 1.0625rem;
    --text-body-lg: 1.0625rem;
    --gutter: 24px;
    --grid-columns: 8;
    --grid-gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-display: 4rem;
    --text-h1: 3rem;
    --text-h2: 2.25rem;
    --text-h3: 1.75rem;
    --text-h4: 1.375rem;
    --text-h5: 1.125rem;
    --text-body-lg: 1.125rem;
    --gutter: 32px;
    --grid-columns: 12;
  }
}

@media (min-width: 1440px) {
  :root {
    --gutter: 40px;
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #0a0a09;
  --color-bg-elevated: #141413;
  --color-bg-subtle: #1c1c1a;
  --color-text-primary: #f5f5f3;
  --color-text-secondary: #a3a3a0;
  --color-text-tertiary: #737370;
  --color-border-subtle: #262624;
  --color-border-default: #2e2e2c;
  --color-primary: #f5f5f3;
  --color-on-primary: #0a0a09;
  --color-primary-hover: #e8e8e6;
  --color-primary-active: #ffffff;
  --color-link: #6bbf9a;
  --color-link-hover: #8fd4b4;
  --color-focus-ring: #f5f5f3;
  --color-success: #3dcf8e;
  --color-warning: #e8b84a;
  --color-error: #f07068;
  --color-hover-surface: #1c1c1a;
  --color-secondary: #1c1c1a;
  --color-secondary-btn-hover: #262624;
}