/*
  THEME TOKENS
  Strict rules:
  - Raw color values may appear ONLY in this file.
  - Raw typography values (font families, sizes, line heights, spacing) may appear ONLY in this file.
*/

:root,
[data-theme="light"] {
  /* Backgrounds */
  --color-bg: #f7f8fa;
  --color-bg-alt: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f0f2f5;

  /* Borders & separators */
  --color-border: #d5d7db;

  /* Text */
  --color-text: #1a1c1e;
  --color-text-muted: #5a5d61;

  /* Accent (Konio brand placeholder) */
  --color-accent: #2aa9c9;
  --color-accent-hover: #1f8aa5;
  --color-accent-muted: #bfe7f0;

  /* Status colors */
  --color-success: #2e8b57;
  --color-warning: #d98c00;
  --color-error: #c0392b;

  /* Misc */
  --shadow-color: rgba(0, 0, 0, 0.08);
  --focus-ring: #2aa9c9;
  --link-color: var(--color-accent);
  --link-hover-color: var(--color-accent-hover);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --header-bg: var(--color-bg);
  --footer-bg: var(--color-bg-alt);

  /* Spacing tokens */
  --space-0: 0;
  --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: 2rem;
  --space-8: 2.5rem;
  --space-9: 3.5rem;

  /* Sizing/layout tokens */
  --content-max: 68rem;
  --card-min: 16rem;

  /* Brand assets */
  --logo-header-hero-height: 8.25rem;
  --logo-header-sticky-height: 4rem;
  --logo-header-height: var(--logo-header-hero-height);
  --logo-hero-height: 4.75rem;

  /* Header layout */
  --size-header-hero-pad-top: 1.75rem;
  --size-header-hero-pad-bottom: 1.25rem;
  --size-header-sticky-pad-top: 0.5rem;
  --size-header-sticky-pad-bottom: 0.5rem;
  --size-header-hero-gap: 1.5rem;
  --size-header-sticky-gap: 0.75rem;
  --size-header-hero-nav-pad-top: 1rem;
  --size-header-sticky-nav-pad-top: 0.25rem;

  --size-header-logo-slide-y: 1.25rem;
  --size-header-nav-slide-y: 0.75rem;
  --size-header-nav-split-x: 5rem;
  --size-header-sticky-name-max-height: 1.25rem;

  /* Radius tokens */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 9999px;

  /* Border tokens */
  --border-1: 1px;
  --border-2: 2px;

  /* Shadows */
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 8px 24px var(--shadow-color);

  /* Motion */
  --motion-fast: 160ms;
  --motion-ease: ease;

  /* Component sizing */
  --size-card-logo: 2.75rem;
  --size-card-logo-radius: var(--radius-lg);
  --size-product-logo: 4.5rem;
  --size-loading-brand-height: 3rem;
  --size-loading-product-mark: 3rem;
  --size-loading-spinner: 2.25rem;
  --size-loading-min-height: 60svh;
  --size-loading-max-width: 26rem;

  --size-mobile-nav-min-width: 14rem;

  /* Component motion */
  --motion-spin: 900ms;
  --motion-logo-glow: 9s;

  /* Logo glow (very subtle) */
  --logo-glow-opacity: 0.16;

  /* Z-index */
  --z-header: 10;
  --z-skiplink: 20;

  /* Typography — families */
  --font-family-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Typography — weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography — sizes */
  --font-size-display: 3rem;
  --font-size-h1: 2.25rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;

  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;

  --font-size-button: 0.95rem;
  --font-size-label: 0.8rem;
  --font-size-caption: 0.75rem;

  /* Typography — line heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* Typography — letter spacing */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;

  /* Typography — shorthands */
  --text-display: var(--font-size-display) / var(--line-height-tight) var(--font-family-sans);
  --text-h1: var(--font-size-h1) / var(--line-height-tight) var(--font-family-sans);
  --text-h2: var(--font-size-h2) / var(--line-height-tight) var(--font-family-sans);
  --text-h3: var(--font-size-h3) / var(--line-height-normal) var(--font-family-sans);
  --text-h4: var(--font-size-h4) / var(--line-height-normal) var(--font-family-sans);

  --text-body: var(--font-size-body) / var(--line-height-relaxed) var(--font-family-sans);
  --text-body-sm: var(--font-size-body-sm) / var(--line-height-relaxed) var(--font-family-sans);

  --text-button: var(--font-size-button) / var(--line-height-normal) var(--font-family-sans);
  --text-label: var(--font-size-label) / var(--line-height-normal) var(--font-family-sans);
  --text-caption: var(--font-size-caption) / var(--line-height-normal) var(--font-family-sans);
}

[data-theme="dark"] {
  /* Backgrounds */
  --color-bg: #0f1214;
  --color-bg-alt: #12171a;
  --color-surface: #151b1f;
  --color-surface-alt: #11161a;

  /* Borders & separators */
  --color-border: #283038;

  /* Text */
  --color-text: #f5f7fa;
  --color-text-muted: #a8b0b8;

  /* Accent */
  --color-accent: #2aa9c9;
  --color-accent-hover: #39c0e2;
  --color-accent-muted: #123a44;

  /* Status colors */
  --color-success: #3fc47a;
  --color-warning: #ffb020;
  --color-error: #ff6b5b;

  /* Misc */
  --shadow-color: rgba(0, 0, 0, 0.35);
  --focus-ring: #39c0e2;
  --link-color: var(--color-accent);
  --link-hover-color: var(--color-accent-hover);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --header-bg: var(--color-bg);
  --footer-bg: var(--color-bg-alt);
}

[data-theme="auto"] {
  /* Auto uses :root (light) by default, then follows system in dark mode. */
  --theme-is-auto: 1;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    /* Backgrounds */
    --color-bg: #0f1214;
    --color-bg-alt: #12171a;
    --color-surface: #151b1f;
    --color-surface-alt: #11161a;

    /* Borders & separators */
    --color-border: #283038;

    /* Text */
    --color-text: #f5f7fa;
    --color-text-muted: #a8b0b8;

    /* Accent */
    --color-accent: #2aa9c9;
    --color-accent-hover: #39c0e2;
    --color-accent-muted: #123a44;

    /* Status colors */
    --color-success: #3fc47a;
    --color-warning: #ffb020;
    --color-error: #ff6b5b;

    /* Misc */
    --shadow-color: rgba(0, 0, 0, 0.35);
    --focus-ring: #39c0e2;
    --link-color: var(--color-accent);
    --link-hover-color: var(--color-accent-hover);
    --card-bg: var(--color-surface);
    --card-border: var(--color-border);
    --header-bg: var(--color-bg);
    --footer-bg: var(--color-bg-alt);
  }
}