/* Prime Deals design tokens. Every color, size and font in the UI comes from here.
   Rules and component names: .claude/skills/ui-system/SKILL.md */

:root {
  /* Color: light (default) */
  --paper: #F6F5F1;      /* page ground */
  --panel: #FFFFFF;      /* lists, boxes, inputs */
  --ink: #16171A;        /* text, primary buttons, heavy rules */
  --muted: #64656B;      /* secondary text (4.9:1 on paper) */
  --rule: #E3E1DA;       /* hairlines */
  --tile: #EFEDE7;       /* image wells */
  --hi: #FFE14D;         /* highlighter: only "% off" and the wordmark */
  --on-hi: #16171A;
  --btn: #16171A;
  --on-btn: #FFFFFF;
  --bad: #B42318;
  --ok: #1E7A46;
  --focus: #2457D6;

  /* Type */
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;          /* body */
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 34px;
  --lh: 1.45;
  --lh-tight: 1.15;
  --track-tight: -0.035em; /* headings */

  /* Space (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 28px;
  --s8: 40px;
  --s9: 64px;

  /* Shape */
  --radius: 4px;          /* buttons, inputs, image wells */
  --radius-box: 6px;      /* panels */
  --rule-heavy: 2px solid var(--ink);
  --hairline: 1px solid var(--rule);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --rail: 300px;
  --tap: 44px;            /* minimum touch target */

  color-scheme: light;
}

/* Dark: follows the system unless the visitor picked a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111213;
    --panel: #18191B;
    --ink: #EDECE8;
    --muted: #9C9CA3;
    --rule: #2A2B2E;
    --tile: #222326;
    --btn: #EDECE8;
    --on-btn: #111213;
    --bad: #FF8A7A;
    --ok: #6FD59A;
    --focus: #8DB0FF;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #111213;
  --panel: #18191B;
  --ink: #EDECE8;
  --muted: #9C9CA3;
  --rule: #2A2B2E;
  --tile: #222326;
  --btn: #EDECE8;
  --on-btn: #111213;
  --bad: #FF8A7A;
  --ok: #6FD59A;
  --focus: #8DB0FF;
  color-scheme: dark;
}