/* ============================================================
   iA_Peças — Color tokens
   Brand: amarelo (yellow) accent on black & white, light gray app canvas.
   Values read from the Figma file + product screenshots.
   ============================================================ */

:root {
  /* ---- Brand palette (base) ---- */
  --brand-yellow: #ffcd55;        /* logo/symbol bg, primary buttons — rgb(255,205,85) */
  --brand-yellow-strong: #ffcc00; /* prices & loud accents — rgb(255,204,0)  */
  --brand-yellow-deep: #ffc107;   /* pressed / darker yellow */
  --brand-yellow-soft: #ffe08a;   /* tints, table header gradient end */
  --brand-yellow-wash: #fff6dc;   /* faint yellow surface */

  --ink-black: #000000;           /* primary text, icon strokes, logo wordmark */
  --ink-900: #111111;
  --pure-white: #ffffff;

  /* ---- Neutrals ---- */
  --gray-50:  #f5f6fa;            /* app canvas — rgb(245,246,250) */
  --gray-100: #f6f6f6;
  --gray-150: #eceef3;
  --gray-200: #e2e1e1;            /* hairline borders — rgb(226,225,225) */
  --gray-300: #d2d1d1;            /* disabled fills — rgb(210,209,209) */
  --gray-400: #c4c4c4;
  --gray-500: #9a9a9a;            /* muted / placeholder text */
  --gray-600: #6e6e6e;            /* secondary text */
  --gray-700: #3f3f3f;

  /* ---- Semantic ---- */
  --danger: #e23b3b;             /* trash / remove */
  --danger-soft: #fdecec;
  --success: #1f9d55;
  --info: #2f6fed;
  --sponsored: #ffcc00;          /* "Patrocinado" / "Desconto" tag */

  /* ---- Semantic aliases (light, default) ---- */
  --surface-canvas: var(--gray-50);
  --surface-card: var(--pure-white);
  --surface-raised: var(--pure-white);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--ink-black);

  --text-strong: var(--ink-black);
  --text-body: #1c1c1c;
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-on-yellow: var(--ink-black);
  --text-on-dark: var(--pure-white);
  --text-price: var(--brand-yellow-strong);

  --accent: var(--brand-yellow);
  --accent-strong: var(--brand-yellow-strong);
  --accent-press: var(--brand-yellow-deep);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--ink-black);

  --focus-ring: rgba(255, 204, 0, 0.55);
}

/* ---- Dark theme (read from Figma dark mode) ---- */
:root[data-theme="dark"], .dark {
  --surface-canvas: #0e0f12;
  --surface-card: #17191e;
  --surface-raised: #1d2026;
  --surface-sunken: #101216;
  --surface-inverse: var(--pure-white);

  --brand-yellow: #ffd60a;
  --brand-yellow-strong: #ffd426;
  --accent: #ffd60a;
  --accent-strong: #ffdf43;

  --text-strong: #f5f6fa;
  --text-body: #e7e8ec;
  --text-muted: #a7abb5;
  --text-faint: #7c818c;
  --text-on-yellow: var(--ink-black);

  --border-subtle: #262a31;
  --border-default: #333842;
  --border-strong: #4a505b;
}