/*
 * Lopettia canonical theme tokens · SmartBriefer.
 *
 * Palette (per CLAUDE.md UX charter, rule 3):
 *   gold     #FCE28A   — primary highlight, tags, hero accent
 *   coral    #F38281   — error / critical / delete
 *   teal     #0D9488   — primary action, link, brand
 *   mint     #5EEAD4   — hover / active state on teal, focus ring
 *   durazno  #F7B285   — warning, "attention" (NEVER amber #FFB547)
 *
 * Apple-flat cards: hairline border (1px, --lop-line), soft shadow,
 * no bevel, no heavy gradients. Money always $ + thousands + 2 decimals.
 *
 * Import this BEFORE smartbriefer.css so its variables win as defaults.
 * Existing hardcoded colors have been swapped to these tokens in bulk;
 * add new colors as tokens here, not as hex literals in components.
 */

:root {
  /* Canonical palette */
  --lop-gold:    #FCE28A;
  --lop-coral:   #F38281;
  --lop-teal:    #0D9488;
  --lop-mint:    #5EEAD4;
  --lop-durazno: #F7B285;

  /* Ink & surface */
  --lop-ink:     #0f172a;   /* body text */
  --lop-ink-2:   #1e293b;   /* headings */
  --lop-mut:     #64748b;   /* muted text */
  --lop-mut-2:   #94a3b8;   /* placeholder */
  --lop-surface: #ffffff;   /* card */
  --lop-canvas:  #f9fafb;   /* page bg */
  --lop-canvas-2:#f1f5f9;   /* subtle panel */
  --lop-line:    #e5e7eb;   /* hairline */

  /* Semantic roles */
  --lop-primary:      var(--lop-teal);
  --lop-primary-hov:  var(--lop-mint);
  --lop-link:         var(--lop-teal);
  --lop-warn:         var(--lop-durazno);
  --lop-error:        var(--lop-coral);
  --lop-ok:           var(--lop-teal);

  /* Cards & motion (Apple-flat) */
  --lop-radius:   10px;
  --lop-radius-l: 14px;
  --lop-shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --lop-shadow-2: 0 4px 12px rgba(15, 23, 42, .08);
  --lop-shadow-3: 0 10px 40px rgba(15, 23, 42, .18);

  /* Typography (system stack — no external fonts required) */
  --lop-font: "SF Pro Display", -apple-system, BlinkMacSystemFont,
              "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --lop-font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Money & numbers · always render right-aligned in tables, tabular figures. */
.lop-num, .lop-money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.lop-money::before { content: "$"; margin-right: 2px; color: var(--lop-mut); }