/* OtoStok design tokens — copied unchanged from design/styles/tokens.css (shared by every page that uses
   the new design: index.html, giris.html, the account pages).
   Single source for colour, type, spacing, radii, shadows and motion. Every other stylesheet uses
   only these variables, so a port to Tailwind (theme.extend) or CSS modules is a one-file mapping.
   The base blue (#1d4ed8) is the colour of the current site. */
:root {
  /* Brand */
  --c-brand-50: #eef2ff;
  --c-brand-100: #e0e7ff;
  --c-brand-200: #c7d2fe;
  --c-brand-600: #2563eb;
  --c-brand-700: #1d4ed8; /* primary: buttons, links, focus */
  --c-brand-800: #1e40af;
  --c-brand-900: #1e3a8a;
  --c-brand-ink: #3730a3; /* text on brand-50/100 chips */

  /* Neutrals (slate) */
  --c-bg: #f4f5f7;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-surface-3: #f1f5f9;
  --c-border: #e2e8f0;
  --c-border-strong: #cbd5e1;
  --c-text: #1a1a2e;
  --c-text-2: #334155;
  --c-text-3: #475569;
  --c-muted: #64748b; /* 4.76:1 on white: the lightest colour allowed for text */

  /* Status */
  --c-ok-bg: #dcfce7;   --c-ok-fg: #166534;   --c-ok: #16a34a;
  --c-err-bg: #fee2e2;  --c-err-fg: #991b1b;  --c-err: #dc2626;  --c-err-border: #fca5a5;
  --c-warn-bg: #fef9c3; --c-warn-fg: #854d0e; --c-warn: #ca8a04; --c-warn-border: #fde047;
  --c-info-bg: #eff6ff; --c-info-fg: #1e40af;
  --c-rel-bg: #e6fced;  --c-rel-bg-hover: #d6f9df; --c-rel-accent: #22c55e;

  /* Type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;  /* body, inputs */
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: clamp(30px, 5vw, 46px); /* landing hero */
  --lh: 1.5;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Radii */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 3px rgba(15, 23, 42, .08);
  --sh-2: 0 8px 24px rgba(15, 23, 42, .14);
  --sh-3: 0 16px 48px rgba(15, 23, 42, .26);

  /* Focus ring: always visible on keyboard focus */
  --focus: 0 0 0 3px rgba(29, 78, 216, .35);

  /* Layout */
  --w-auth: 400px;
  --w-prose: 820px;
  --w-app: 1080px;
  --w-site: 1120px;
  --tap: 44px; /* minimum touch target */

  /* Motion */
  --t-fast: .15s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; }
}