/* Gerado a partir de docs/design-system/tokens/*.css — não editar à mão; rode scripts/sync_design.sh */

/* ── tokens/typography.css ── */

:root {
  /* Faces — inherited from Organic; JetBrains Mono is a Baratão addition for
     coupon codes, price deltas and any figure that must align in a column. */
  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Display / heading scale */
  --text-display: 52px;
  --text-h1: 42px;
  --text-h2: 32px;
  --text-h3: 25px;
  --text-h4: 20px;
  --text-h5: 16px;
  --text-eyebrow: 13px;

  /* Body + interface */
  --text-lead: 17px;
  --text-body: 15px;
  --text-sm: 13px;
  --text-xs: 11px;
  --text-micro: 10px;

  /* Prices — the loudest number on any card */
  --text-price-lg: 30px;
  --text-price-md: 22px;
  --text-price-sm: 17px;
  --text-price-was: 13px;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --tracking-eyebrow: 0.08em;
  --tracking-tight: -0.015em;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
}

/* ── tokens/colors.css ── */
:root {
  /* ── Ground and ink (from Organic) ───────────────────────────────── */
  /* Lighter than Organic's #f5ead8 ground, same warmth — the feed carries a lot
     of imagery and price colour, so it needs a calmer paper. */
  --color-bg: #fdf8f0;
  --color-surface: #f2e7d5;
  --color-surface-raised: #fffcf6;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* ── Roles ───────────────────────────────────────────────────────── */
  --color-accent: #c67139;    /* terracotta — brand, links, primary action  */
  --color-accent-2: #7a8a5e;  /* sage — verified, community, good price     */
  --color-hot: #dc4326;       /* vermilion — Baratão addition: the discount */

  /* ── Tonal ramps, OKLCH on one shared lightness scale ───────────── */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --color-hot-100: #ffefe9;
  --color-hot-200: #ffd8cc;
  --color-hot-300: #ffb39f;
  --color-hot-400: #fa8064;
  --color-hot-500: #ea5735;
  --color-hot-600: #c73d1f;
  --color-hot-700: #9d2c15;
  --color-hot-800: #711f10;
  --color-hot-900: #47160e;

  /* ── Semantic aliases — read these, not the ramps, in product code ─ */
  --text-primary: var(--color-text);
  --text-secondary: color-mix(in srgb, var(--color-text) 70%, transparent);
  --text-muted: color-mix(in srgb, var(--color-text) 50%, transparent);
  --text-on-accent: var(--color-bg);

  --surface-page: var(--color-bg);
  --surface-card: var(--color-surface);
  --surface-card-quiet: var(--color-surface-raised);
  --surface-inset: color-mix(in srgb, var(--color-text) 5%, transparent);

  --border-quiet: var(--color-divider);
  --overlay: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
  --border-strong: color-mix(in srgb, var(--color-text) 32%, transparent);

  /* Deal semantics — the vocabulary of the feed */
  --deal-price: var(--color-hot-700);        /* the live price               */
  --deal-was: var(--text-muted);             /* struck-through former price  */
  --deal-drop: var(--color-hot-500);         /* the −% badge fill            */
  --deal-record: var(--color-hot-600);       /* "recorde histórico"          */
  --deal-good: var(--color-accent-2-600);    /* "bom preço"                  */
  --deal-watch: var(--color-accent-600);     /* "vale acompanhar"            */
  --deal-expired: var(--color-neutral-500);  /* "acabou"                     */

  /* Ink for each fill above. A badge fill is not free to be light unless its ink
     follows — StatusBadge and DiscountBadge read these, never --color-bg. */
  --deal-drop-ink: var(--color-bg);
  --deal-record-ink: var(--color-bg);
  --deal-great-ink: var(--color-bg);
  --deal-good-ink: var(--color-bg);
  --deal-watch-ink: var(--color-bg);
  --deal-expired-ink: var(--color-bg);
  --deal-coupon: var(--color-accent-700);    /* coupon codes                 */

  --state-positive: var(--color-accent-2-600);
  --state-warning: var(--color-accent-600);
  --state-negative: var(--color-hot-600);
  --state-info: var(--color-neutral-700);
}

/* ── tokens/spacing.css ── */
:root {
  /* Density 1.10× (Organic), extended upward for full-page composition */
  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-5: 22px;
  --space-6: 26.4px;
  --space-8: 35.2px;
  --space-10: 44px;
  --space-12: 52.8px;
  --space-16: 70.4px;
  --space-20: 88px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: var(--space-6);
  --rail-gap: var(--space-3);
  --card-w-deal: 232px;      /* one card in a horizontal rail */
  --card-w-deal-wide: 320px; /* hero / featured card         */
  --header-h: 68px;
  --subnav-h: 52px;

  --z-base: 0;
  --z-sticky: 40;
  --z-header: 50;
  --z-toast: 70;
  --z-dialog: 80;
}

/* ── tokens/elevation.css ── */
:root {
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
  /* Baratão addition: the lift a deal card takes on hover */
  --shadow-hover: 0 8px 20px color-mix(in srgb, #2e2b25 20%, transparent);

  --border-width: 1px;
  --border-width-loud: 2px;

  /* Motion — short, eased, never bouncy past 1 overshoot */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.35, 1);
  --lift-hover: translateY(-2px);
  --press-scale: 0.97;
}

/* ── tokens/base.css ── */
/* Base element layer — resets and default type only. Component styling lives
   in the JSX components, driven by the tokens above. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: var(--text-xs); margin-top: var(--space-1); color: var(--text-muted); }
small { font-size: var(--text-xs); }

/* Numerals align in columns wherever prices stack */
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-hot) 28%, transparent); }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}