/* Sellers Shield Checkout — Design Tokens */

:root {
  /* Type */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Color — warm neutrals */
  --bg: oklch(98.5% 0.004 80);
  --bg-elev: #ffffff;
  --bg-muted: oklch(96% 0.005 80);
  --bg-sunken: oklch(94% 0.006 80);

  --ink: oklch(18% 0.012 250);
  --ink-2: oklch(35% 0.015 250);
  --ink-3: oklch(52% 0.012 250);
  --ink-4: oklch(70% 0.008 250);

  --line: oklch(89% 0.006 250);
  --line-strong: oklch(82% 0.008 250);

  /* Brand — Sellers Shield navy on pale slate */
  --navy: oklch(23% 0.06 260);     /* deep navy from their headlines */
  --navy-2: oklch(32% 0.07 260);
  --ss-navy: oklch(23% 0.06 260);
  --ss-black: oklch(23% 0.06 260);   /* alias to navy for cohesion */
  --ss-paper: oklch(94.5% 0.005 240);  /* pale slate-blue page bg */
  --ss-paper-2: oklch(92% 0.007 240);

  /* Selected-state tint (their soft blue card highlight) */
  --ss-blue: oklch(52% 0.16 250);
  --ss-blue-bg: oklch(96% 0.022 245);

  /* Warm accent — tan/orange from "Now you do." */
  --ss-warm: oklch(74% 0.13 65);
  --ss-warm-2: oklch(64% 0.14 60);
  --ss-warm-bg: oklch(95% 0.04 70);

  /* Accent — Sellers Shield green (matches their plan-card UI) */
  --gold: oklch(58% 0.14 148);     /* legacy name, now green */
  --gold-2: oklch(48% 0.14 148);
  --gold-bg: oklch(95% 0.04 148);
  --ss-green: oklch(58% 0.14 148);
  --ss-green-2: oklch(48% 0.14 148);
  --ss-green-bg: oklch(95% 0.04 148);

  /* Legacy amber alias (kept for B/workflow which already used it) */
  --amber: var(--gold);
  --amber-bg: var(--gold-bg);

  /* Status */
  --green: oklch(58% 0.12 150);
  --green-bg: oklch(95% 0.04 150);
  --red: oklch(58% 0.18 25);
  --red-bg: oklch(96% 0.04 25);
  --blue: oklch(55% 0.14 245);
  --blue-bg: oklch(96% 0.03 245);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.04), 0 0 0 1px var(--line);
  --shadow-md: 0 4px 24px -8px rgba(20, 22, 30, 0.08), 0 0 0 1px var(--line);
  --shadow-focus: 0 0 0 3px oklch(72% 0.14 65 / 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

.serif {
  font-family: var(--font-serif);
}

/* Generic shield logo */
.ss-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-size: 15px;
}
.ss-logo svg {
  width: 22px;
  height: 22px;
}