/* =========================================================
   TRUSTER — design tokens
   Based on ktozvonil v2 tokens with GREEN brand override
   (classic review-site palette) and trust-score scale.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* Brand — primary green for "trust" semantic */
  --brand-500: #00b67a;
  --brand-600: oklch(0.66 0.16 158);
  --brand-700: oklch(0.55 0.16 160);
  --brand-100: oklch(0.94 0.06 158);
  --brand-50:  oklch(0.97 0.03 158);

  /* Verdict palette — used for trust tiers */
  --verdict-spam:    oklch(0.62 0.21 22);
  --verdict-spam-bg: oklch(0.96 0.04 22);
  --verdict-warn:    oklch(0.74 0.16 75);
  --verdict-warn-bg: oklch(0.97 0.05 80);
  --verdict-warn-ink: oklch(0.45 0.14 75);
  --verdict-safe:    oklch(0.62 0.15 158);
  --verdict-safe-bg: oklch(0.96 0.04 158);
  --verdict-mute:    oklch(0.55 0 0);
  --verdict-mute-bg: oklch(0.96 0 0);
  --verdict-ad:      oklch(0.7 0.13 295);
  --verdict-ad-bg:   oklch(0.95 0.05 295);

  /* Trust tiers (0..100) */
  --trust-excellent: oklch(0.62 0.16 158); /* 80-100  */
  --trust-great:     oklch(0.68 0.16 130); /* 60-79   */
  --trust-average:   oklch(0.74 0.16 75);  /* 40-59   */
  --trust-poor:      oklch(0.68 0.18 35);  /* 20-39   */
  --trust-bad:       oklch(0.62 0.21 22);  /* 0-19    */

  /* Star metaphor */
  --star-on:  #ffb800;
  --star-off: oklch(0.92 0.005 240);

  /* Neutrals — slightly warm, light */
  --bg:        oklch(0.99 0.003 150);
  --surface:   #ffffff;
  --surface-2: oklch(0.975 0.004 150);
  --surface-3: oklch(0.95 0.005 150);
  --border:    oklch(0.92 0.006 150);
  --border-strong: oklch(0.85 0.008 150);
  --text:      oklch(0.22 0.02 230);
  --text-2:    oklch(0.45 0.02 230);
  --text-3:    oklch(0.6 0.02 230);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 0 rgba(20,40,30,.04), 0 1px 2px rgba(20,40,30,.04);
  --shadow-md: 0 1px 0 rgba(20,40,30,.04), 0 8px 24px -12px rgba(20,40,30,.12);
  --shadow-lg: 0 1px 0 rgba(20,40,30,.04), 0 24px 48px -20px rgba(0,160,90,.18);
  --ring:      0 0 0 4px color-mix(in oklch, var(--brand-500) 25%, transparent);

  /* Spacing scale */
  --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: 56px;

  /* Density (Tweaks-controlled) */
  --dens: 1;
  --pad-card: calc(20px * var(--dens));
  --gap-card: calc(14px * var(--dens));
  --gap-row:  calc(10px * var(--dens));

  /* Type */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Animation */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,0,.2,1);

  /* Layout */
  --topbar-h: 72px;
  --container: 1180px;
}

[data-theme="dark"] {
  --bg:        oklch(0.16 0.01 220);
  --surface:   oklch(0.21 0.012 220);
  --surface-2: oklch(0.25 0.013 220);
  --surface-3: oklch(0.30 0.014 220);
  --border:    oklch(0.32 0.015 220);
  --border-strong: oklch(0.42 0.02 220);
  --text:      oklch(0.97 0.005 220);
  --text-2:    oklch(0.78 0.01 220);
  --text-3:    oklch(0.62 0.015 220);

  --brand-100: oklch(0.32 0.06 158);
  --brand-50:  oklch(0.25 0.05 158);

  --verdict-spam-bg: oklch(0.30 0.07 22);
  --verdict-warn-bg: oklch(0.30 0.06 75);
  --verdict-safe-bg: oklch(0.28 0.05 158);
  --verdict-mute-bg: oklch(0.28 0.005 220);
  --verdict-ad-bg:   oklch(0.30 0.06 295);
  --verdict-warn-ink: oklch(0.85 0.12 75);

  --star-off: oklch(0.34 0.01 220);

  --shadow-sm: 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px -16px rgba(0,0,0,.5);
  --shadow-lg: 0 1px 0 rgba(0,0,0,.2), 0 24px 60px -24px rgba(0,0,0,.55);
}

/* ── Base ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
}
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }
img { max-width: 100%; display: block; }
/* Default inline icon size — Icon.* SVGs have only viewBox so they need
   a default footprint. SVGs with explicit width/height attrs (gauge,
   sparklines, stars) keep their own dimensions. */
svg:not([width]) { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 0; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: var(--brand-100); color: var(--brand-700); }