/*
 * Shared theme for the landing page (site/) and the pitch deck (site/public/pitch/).
 * Mirrors src/mobile/src/design/tokens.ts: same values, same names in kebab-case
 * (Colors.textSecondary → --text-secondary, Spacing.three → --space-three).
 * Change a value there → change it here. No product name, no web fonts, no CDNs.
 */

:root {
  /* palette.brand (teal) */
  --brand-50: #eefbf8;
  --brand-100: #d2f5ec;
  --brand-200: #a6eada;
  --brand-300: #6dd8c2;
  --brand-400: #2ec4a9;
  --brand-500: #129e88;
  --brand-600: #0b7a6c;
  --brand-700: #0a6258;
  --brand-800: #0c4f48;
  --brand-900: #0d403b;

  /* palette.neutral */
  --neutral-0: #fff;
  --neutral-50: #f7f8fa;
  --neutral-100: #f0f0f3;
  --neutral-200: #e0e1e6;
  --neutral-300: #c8cad0;
  --neutral-400: #b0b4ba;
  --neutral-500: #8b8f97;
  --neutral-600: #60646c;
  --neutral-700: #3a3d42;
  --neutral-800: #2e3135;
  --neutral-900: #212225;
  --neutral-950: #111113;
  --neutral-1000: #000;

  /* Colors.light */
  --text: var(--neutral-1000);
  --text-secondary: var(--neutral-600);
  --background: var(--neutral-0);
  --background-element: var(--neutral-100);
  --background-selected: var(--neutral-200);
  --border: var(--neutral-200);
  --primary: var(--brand-600);
  --primary-pressed: var(--brand-700);
  --primary-subtle: var(--brand-50);
  --on-primary: var(--neutral-0);
  --success: #1f9d55;
  --warning: #b45309;
  --danger: #dc2626;
  --on-danger: var(--neutral-0);

  /* Spacing (4pt scale) */
  --space-half: 2px;
  --space-one: 4px;
  --space-two: 8px;
  --space-three: 16px;
  --space-four: 24px;
  --space-five: 32px;
  --space-six: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Elevation */
  --elevation-low: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  --elevation-high: 0 4px 12px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.12);

  /* Motion */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;

  /* Fonts: system stacks only (works offline, full Turkish glyph coverage) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography (size / line-height / weight) */
  --type-display: 600 48px / 52px var(--font-sans);
  --type-title: 600 32px / 40px var(--font-sans);
  --type-heading: 600 22px / 28px var(--font-sans);
  --type-body: 400 16px / 24px var(--font-sans);
  --type-body-strong: 600 16px / 24px var(--font-sans);
  --type-caption: 500 14px / 20px var(--font-sans);
  --type-label: 600 13px / 16px var(--font-sans);
  --type-code: 500 12px / 16px var(--font-mono);

  color-scheme: light dark;
}

/* Colors.dark: follows the OS unless data-theme="light" pins it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: var(--neutral-0);
    --text-secondary: var(--neutral-400);
    --background: var(--neutral-1000);
    --background-element: var(--neutral-900);
    --background-selected: var(--neutral-800);
    --border: var(--neutral-800);
    --primary: var(--brand-400);
    --primary-pressed: var(--brand-300);
    --primary-subtle: var(--brand-900);
    --on-primary: var(--neutral-950);
    --success: #3dd68c;
    --warning: #fbbf24;
    --danger: #f87171;
    --on-danger: var(--neutral-950);
  }
}

:root[data-theme="dark"] {
  --text: var(--neutral-0);
  --text-secondary: var(--neutral-400);
  --background: var(--neutral-1000);
  --background-element: var(--neutral-900);
  --background-selected: var(--neutral-800);
  --border: var(--neutral-800);
  --primary: var(--brand-400);
  --primary-pressed: var(--brand-300);
  --primary-subtle: var(--brand-900);
  --on-primary: var(--neutral-950);
  --success: #3dd68c;
  --warning: #fbbf24;
  --danger: #f87171;
  --on-danger: var(--neutral-950);
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Text variants (Typography) */
.t-display {
  font: var(--type-display);
  letter-spacing: -0.02em;
}
.t-title {
  font: var(--type-title);
  letter-spacing: -0.01em;
}
.t-heading {
  font: var(--type-heading);
}
.t-body {
  font: var(--type-body);
}
.t-body-strong {
  font: var(--type-body-strong);
}
.t-caption {
  font: var(--type-caption);
}
.t-label {
  font: var(--type-label);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.t-code {
  font: var(--type-code);
}
.t-secondary {
  color: var(--text-secondary);
}
.t-primary {
  color: var(--primary);
}

/* Brand wordmark: rounded face, primary accent on the second word */
.wordmark {
  font-family: var(--font-rounded);
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.wordmark em {
  font-style: normal;
  color: var(--primary);
}

/* Button (variant: primary / secondary / ghost) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-two);
  min-height: 44px;
  padding: 0 var(--space-four);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font: var(--type-body-strong);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast);
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover {
  background: var(--primary-pressed);
}
.btn-secondary {
  background: var(--background-element);
  color: var(--text);
}
.btn-secondary:hover {
  background: var(--background-selected);
}
.btn-ghost {
  background: transparent;
  color: var(--primary);
}

/* Card */
.card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-four);
}
.card-elevated {
  border-color: transparent;
  box-shadow: var(--elevation-high);
}
.card-subtle {
  background: var(--primary-subtle);
  border-color: transparent;
}

/* Pill / badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-one);
  padding: var(--space-one) var(--space-three);
  border-radius: var(--radius-full);
  background: var(--primary-subtle);
  color: var(--primary);
  font: var(--type-label);
}
.pill-danger {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}
.pill-warning {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}

/* Draft marker for unverified claims: visible on purpose, remove before the pitch */
.verify {
  display: inline-block;
  padding: 0 var(--space-two);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
  font: var(--type-label);
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* biome-ignore lint/complexity/noImportantStyles: must beat every component transition */
    transition-duration: 0ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: must beat every component animation */
    animation-duration: 0ms !important;
  }
}