/* ============================================================
   Adfactors GEO — Design Tokens
   Light theme (this pass). Built on CSS custom properties so
   the dark agency theme is a token swap (see [data-theme]).
   ============================================================ */

:root {
  /* ---- Surfaces & ink (warm neutral, to match saffron identity) ---- */
  --bg:        #f7f5f1;
  --bg-tint:   #f1ece5;
  --surface:   #ffffff;
  --surface-2: #f3efe8;   /* insets, tracks, chips */
  --line:      #e9e3d9;
  --line-2:    #d9d2c6;
  --ink:       #2c2a27;
  --muted:     #6c655c;
  --faint:     #9c958b;

  /* ---- Brand — Adfactors saffron (#e28f27, sampled from logo) ---- */
  --accent:      #e28f27;  /* fills, brand, accents (NOT small text) */
  --accent-2:    #ec9f3e;  /* lighter saffron, gradient start */
  --accent-3:    #f2b35f;  /* highlight */
  --accent-deep: #c2761a;  /* gradient end / hover / press */
  --accent-wash: #fbf0df;  /* tinted fill */
  --accent-ink:  #8a5210;  /* readable saffron-brown — use for TEXT/links */

  /* ---- Semantic grade scale (shared, never recolor) ---- */
  --grade-a: #1faf5e;  /* A 85-100 green */
  --grade-b: #6fae34;  /* B 70-84 lime-green */
  --grade-c: #e0a020;  /* C 55-69 amber */
  --grade-d: #e07a2a;  /* D 40-54 orange*/
  --grade-f: #e2476a;  /* F 0-39 red    */

  /* washes for grade tints */
  --grade-a-wash: #e3f6ec;
  --grade-b-wash: #eef6e0;
  --grade-c-wash: #fbf1da;
  --grade-d-wash: #fbeede;
  --grade-f-wash: #fbe5eb;

  /* ---- Attention / pending (amber) ---- */
  --amber:      #e0a020;
  --amber-soft: #f5c563;
  --amber-wash: #fbf1da;
  --amber-ink:  #8a6206;

  /* danger (keyword stuffing, request changes) */
  --danger:      #e2476a;
  --danger-wash: #fbe5eb;
  --danger-ink:  #9c2742;

  /* success */
  --success:      #1faf5e;
  --success-wash: #e3f6ec;
  --success-ink:  #0d5e33;

  /* ---- Typography ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Radius ---- */
  --r-card: 18px;
  --r-card-sm: 14px;
  --r-ctrl: 10px;
  --r-pill: 999px;

  /* ---- Shadow (light) ---- */
  --shadow-sm: 0 1px 2px rgba(45,38,30,.05), 0 1px 1px rgba(45,38,30,.03);
  --shadow:    0 6px 24px -16px rgba(45,38,30,.26), 0 2px 6px -4px rgba(45,38,30,.08);
  --shadow-lg: 0 24px 60px -28px rgba(45,38,30,.32), 0 8px 22px -16px rgba(45,38,30,.12);
  --shadow-focus: 0 0 0 3px rgba(226,143,39,.34);

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 140ms;
  --dur: 250ms;
  --dur-slow: 420ms;

  --maxw: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.5;
}
::selection { background: rgba(226,143,39,.22); }

/* tabular numerals everywhere numbers matter */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}