/* ==========================================================================
   OptiRank Studio — Design Tokens
   Every other stylesheet references these custom properties. Light mode is
   the default; dark mode overrides via prefers-color-scheme.
   ========================================================================== */

:root {
  /* Color — light mode (default) */
  --color-ink: #0B0E14;
  --color-ink-dim: #4A5265;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F6F8;
  --color-border: #E3E6EB;

  --color-primary: #3D5AFE;
  --color-primary-dim: #2A3FCC;
  --color-primary-tint: #EDF0FF;

  /* Primary as a solid background under white text. Held constant across both
     themes: the text-facing --color-primary lightens in dark mode for contrast
     against dark surfaces, which would drop white-on-blue below 4.5:1. */
  --color-primary-solid: #3D5AFE;
  --color-primary-solid-hover: #2A3FCC;

  --color-accent: #00D9B5;
  --color-warn: #F5A524;
  --color-danger: #F5484A;

  /* Fixed neutrals used on top of primary-colored backgrounds */
  --color-on-primary: #FFFFFF;

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-caption: 0.8125rem;                                   /* 13px */
  --text-body: 1rem;                                           /* 16px */
  --text-body-lg: 1.125rem;                                    /* 18px */
  --text-h3: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);          /* 22-26px */
  --text-h2: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);            /* 28-36px */
  --text-h1: clamp(2.5rem, 1.6rem + 4vw, 4rem);                /* 40-64px */

  /* Spacing (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;

  --section-padding: var(--space-8);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(11, 14, 20, 0.04), 0 8px 24px rgba(11, 14, 20, 0.06);
  --shadow-card-hover: 0 4px 8px rgba(11, 14, 20, 0.06), 0 16px 40px rgba(11, 14, 20, 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-reveal: 500ms;

  /* Layout */
  --content-max: 1200px;
  --prose-max: 720px;
  --header-height: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ink: #F2F4F8;
    --color-ink-dim: #A3ACC2;
    --color-surface: #0B0E14;
    --color-surface-alt: #12151D;
    --color-border: #232838;
    --color-primary-tint: #161C33;

    --color-primary: #6B84FF;
    --color-primary-dim: #8DA1FF;
    --color-accent: #1BE8C4;
    --color-warn: #FFB94D;
    --color-danger: #FF6668;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.28), 0 16px 40px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --color-ink: #F2F4F8;
  --color-ink-dim: #A3ACC2;
  --color-surface: #0B0E14;
  --color-surface-alt: #12151D;
  --color-border: #232838;
  --color-primary-tint: #161C33;

  --color-primary: #6B84FF;
  --color-primary-dim: #8DA1FF;
  --color-accent: #1BE8C4;
  --color-warn: #FFB94D;
  --color-danger: #FF6668;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.28), 0 16px 40px rgba(0, 0, 0, 0.4);
}