/* design-system/tokens.css
 * LmAtende brand tokens — clean marketplace visual contract.
 * Structured to mirror the Clay reference package so a future React
 * implementation can drop the declarations in unchanged.
 *
 * Visual direction: pure white canvas, single saturated green accent,
 * soft layered shadows, transactional typography (Inter / Inter Tight).
 *
 * Brand identity is LmAtende's own — not Clay's. The token *names*
 * stay close to Clay's (`--bg`, `--surface`, `--accent`, `--elev-*`)
 * so the cross-brand comparison stays readable.
 */

:root {
  /* ── Brand foundation ─────────────────────────────────────────────────
   * Canvas, ink, dividers. Order: lightest surface → deepest ink. */
  --bg:              #ffffff;
  --surface:         #f6f7f9;          /* section background, sidebar fill, table stripe */
  --surface-soft:    #eef0f3;          /* secondary inset surface */
  --fg:              #0e1116;          /* primary text, headings, product names */
  --fg-soft:         #4a5260;          /* body text, secondary labels, helper */
  --muted:           #6b7280;          /* tertiary text, captions, placeholders */
  --disabled:        #9ca3af;          /* disabled text, ghosted state */
  --border:          #e6e8ec;          /* primary border */
  --border-soft:     #eef0f3;          /* nested border, input resting */

  /* ── Accent — Verde LmAtende ──────────────────────────────────────────
   * Single saturation point. Drives primary CTA, links, paid status,
   * focus ring. Stops at 700 — never darker. */
  --accent:          #0f8b5c;
  --accent-hover:    #0c7a4f;
  --accent-active:   #0a6843;
  --accent-on:       #ffffff;
  --accent-50:       #e8f5ee;
  --accent-100:      #cfe8d6;

  /* ── Order lifecycle states (PRD §3.3) ────────────────────────────────
   * Each state owns one color, with a soft background for chips. */
  --status-aguardando:        #6b7280;
  --status-aguardando-bg:     #f0f1f4;
  --status-aguardando-text:   #4a5260;  /* chip text · AA on -bg at 13px */
  --status-pago:              #0f8b5c;
  --status-pago-bg:           #e8f5ee;
  --status-pago-text:         #0c7a4f;  /* chip text · AA on -bg at 13px */
  --status-preparacao:        #e08a1e;
  --status-preparacao-bg:     #fbecd1;
  --status-preparacao-text:   #8a5a13;
  --status-entrega:           #1f70c1;
  --status-entrega-bg:        #dde9f7;
  --status-entrega-text:      #175ea8;  /* chip text · AA on -bg at 13px */
  --status-pronto:            #5a4fcf;
  --status-pronto-bg:         #e3dfee;
  --status-pronto-text:       #4a429e;  /* chip text · AA on -bg at 13px */
  --status-entregue:          #0c7a4f;
  --status-cancelado:         #d14b4b;
  --status-cancelado-bg:      #fae2e2;
  --status-cancelado-text:    #a93232;
  --pix-verde:                #21c97a;   /* promotional Pix-only accent */
  --pix-verde-bg:             #e6faf0;

  /* ── Danger / warning / info (system feedback) ──────────────────────── */
  --danger:          #d14b4b;
  --danger-soft:     #fae2e2;
  --warn:            #e08a1e;
  --warn-soft:       #fbecd1;
  --info:            #1f70c1;
  --info-soft:       #dde9f7;
  --success:         #0f8b5c;
  --success-soft:    #e8f5ee;

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-display:    "Inter", "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:       "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeric:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale — used by typography utility components */
  --text-micro:      12px;
  --text-caption:    13px;
  --text-body-sm:    14px;
  --text-body:       16px;
  --text-h3:         17px;
  --text-numeric:    18px;
  --text-h2:         20px;
  --text-h1:         24px;
  --text-display-m:  32px;
  --text-display-l:  44px;

  --leading-tight:   1.06;
  --leading-display: 1.10;
  --leading-snug:    1.20;
  --leading-base:    1.50;
  --leading-numeric: 1.20;

  --tracking-display: -0.02em;
  --tracking-h1:      -0.01em;
  --tracking-body:     0;
  --tracking-uppercase: 0.06em;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-14:        56px;
  --space-18:        72px;
  --space-24:        96px;

  --section-y-desktop: 96px;
  --section-y-tablet:  64px;
  --section-y-phone:   48px;

  /* ── Radius ────────────────────────────────────────────────────────── */
  --radius-xs:        6px;
  --radius-sm:        8px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --radius-xl:       20px;
  --radius-pill:    9999px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --elev-flat:        none;
  --elev-card:        0 1px 2px rgba(14, 17, 22, 0.04), 0 4px 16px rgba(14, 17, 22, 0.04);
  --elev-card-hover:  0 2px 6px rgba(14, 17, 22, 0.06), 0 12px 28px rgba(14, 17, 22, 0.08);
  --elev-floating:    0 2px 8px rgba(14, 17, 22, 0.06), 0 12px 28px rgba(14, 17, 22, 0.08);
  --elev-sticky:      0 -1px 0 rgba(14, 17, 22, 0.04), 0 -8px 16px rgba(14, 17, 22, 0.04);
  --elev-modal:       0 8px 16px rgba(14, 17, 22, 0.16), 0 24px 56px rgba(14, 17, 22, 0.20);
  --elev-backdrop:    rgba(14, 17, 22, 0.45);
  --focus-ring:       0 0 0 4px rgba(15, 139, 92, 0.18);
  --focus-ring-danger: 0 0 0 4px rgba(209, 75, 75, 0.18);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --motion-fast:      150ms;
  --motion-base:      240ms;
  --motion-slow:      320ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:  cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Layout ────────────────────────────────────────────────────────── */
  --container-max:        1240px;
  --container-gutter-desktop: 32px;
  --container-gutter-tablet:  24px;
  --container-gutter-phone:   20px;

  /* Buyer device frame — render prototypes inside this */
  --buyer-frame-width:  390px;
  --buyer-frame-height: 844px;
}