/**
 * Pufaan design tokens — semantic layer mapped to Brand Kit foundation.
 * Prefer semantic tokens (--color-*, --space-*) in components.
 * Do not redefine brand hex values here — edit brand.css.
 */

:root {
  color-scheme: light;

  /* Primary — Brand Kit forest */
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-primary-hover);
  --color-primary-active: var(--brand-primary-active);
  --color-on-primary: var(--brand-on-primary);

  /* Surfaces — warm paper canvas */
  --color-white: #ffffff;
  --color-secondary: var(--brand-bg);
  --color-secondary-muted: var(--brand-bg-muted);
  --color-bg-canvas: var(--brand-bg);
  --color-bg-elevated: var(--brand-bg-elevated);
  --color-bg-subtle: var(--brand-bg-muted);
  --color-accent: var(--brand-secondary);
  --color-accent-soft: var(--brand-secondary-soft);
  --color-on-secondary: var(--brand-text);
  --color-on-white: var(--brand-text);

  /* 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: var(--brand-text-muted);
  --color-gray-700: #3d3d3a;
  --color-gray-800: #262624;
  --color-gray-900: #141413;
  --color-gray-950: #0a0a09;

  /* Text */
  --color-text-primary: var(--brand-text);
  --color-text-secondary: var(--brand-text-muted);
  /* Caption / meta — distinct from secondary for hierarchy; still AA on warm paper */
  --color-text-tertiary: var(--brand-text-faint);
  --color-text-disabled: #a3a3a0;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border-subtle: var(--brand-border);
  --color-border-default: var(--brand-border-strong);
  --color-border-strong: rgba(26, 26, 26, 0.28);
  --color-border-focus: var(--brand-primary);
  --color-border-error: #b42318;
  --color-border-success: #1a7a4c;

  /* Links — same forest family as primary */
  --color-link: var(--brand-primary);
  --color-link-hover: var(--brand-primary-hover);
  --color-link-visited: #3d5a4f;
  --color-link-underline: rgba(30, 58, 47, 0.35);
  --color-text-link: var(--color-link);
  --color-text-link-hover: var(--color-link-hover);

  /* 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: rgba(30, 58, 47, 0.05);
  --color-hover-surface-strong: rgba(30, 58, 47, 0.09);
  --color-hover-overlay: rgba(30, 58, 47, 0.04);
  --color-secondary-btn-hover: var(--brand-bg-muted);
  --color-focus-ring: var(--brand-primary);

  /* 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-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;

  /* Section rhythm — one system across marketing pages */
  --section-pad-sm: var(--space-6);
  --section-pad-md: var(--space-8);
  --section-pad-lg: var(--space-10);
  --section-pad-xl: var(--space-12);
  --hero-pad-block: var(--space-6) var(--space-8);
  --layout-measure: 48rem;
  --layout-measure-wide: 56rem;

  /* Radius — aligned to design system (buttons 8px, inputs/cards 12px, media 20px) */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: var(--brand-radius);
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(30, 58, 47, 0.04);
  --shadow-sm: var(--brand-shadow);
  --shadow-md: var(--brand-shadow-hover);
  --shadow-focus: var(--brand-focus);

  /* 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: var(--brand-max);
  --container-2xl: 1440px;
  --gutter: 16px;
  --header-height: 64px;
  --announcement-height: 40px;
  --grid-columns: 4;
  --grid-gutter: 16px;
  --z-header: 100;
  --z-announcement: 110;
  --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;
    --hero-pad-block: var(--space-8) var(--space-10);
    --section-pad-sm: var(--space-8);
    --section-pad-md: var(--space-10);
    --section-pad-lg: var(--space-12);
    --section-pad-xl: var(--space-16);
  }
}

@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;
    --hero-pad-block: var(--space-8) var(--space-10);
  }
}

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

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

  --color-bg-canvas: #0f1412;
  --color-bg-elevated: #161c19;
  --color-bg-subtle: #1c2420;
  --color-text-primary: #f4f1ea;
  --color-text-secondary: #a3a3a0;
  --color-text-tertiary: #737370;
  --color-border-subtle: rgba(244, 241, 234, 0.08);
  --color-border-default: rgba(244, 241, 234, 0.14);
  --color-primary: #c5d4cb;
  --color-on-primary: #0f1412;
  --color-primary-hover: #d7e3dc;
  --color-primary-active: #ffffff;
  --color-link: #8fd4b4;
  --color-link-hover: #b3e4cb;
  --color-focus-ring: #c5d4cb;
  --color-success: #3dcf8e;
  --color-warning: #e8b84a;
  --color-error: #f07068;
  --color-hover-surface: #1c2420;
  --color-secondary: #1c2420;
  --color-secondary-btn-hover: #262e2a;
}