/* Emporium da Arte — Design Tokens
   Inspired by the shop's pink magenta logo + cream backdrop with floral details.
   "Equilibrado" personality — pink as the lead, clean modern UI for everything else.
*/

:root {
  /* ─── Pink (primary, derived from the logo) ─────────────────── */
  --pink-50:  #FFF1F7;
  --pink-100: #FFE1EC;
  --pink-200: #FFC2D9;
  --pink-300: #FF93BC;
  --pink-400: #F95599;
  --pink-500: #E91E78;   /* PRIMARY — brand pink */
  --pink-600: #C8125F;
  --pink-700: #A30D4D;
  --pink-800: #7B0A3A;
  --pink-900: #54072A;

  /* ─── Cream (logo backdrop, used in "temática" variant) ───── */
  --cream-50: #FDFAF3;
  --cream-100: #FBF4E4;
  --cream-200: #F5E8C9;
  --cream-300: #EBD7A4;

  /* ─── Accent (warm gold, from the floral accents) ─────────── */
  --gold-400: #E8B14A;
  --gold-500: #C9912D;

  /* ─── Neutrals (zinc-tinted, slight warmth) ────────────────── */
  --ink-50:  #FAFAF9;
  --ink-100: #F4F4F2;
  --ink-200: #E7E6E2;
  --ink-300: #D2D0CA;
  --ink-400: #A1A09A;
  --ink-500: #71706B;
  --ink-600: #52514D;
  --ink-700: #3A3A37;
  --ink-800: #232321;
  --ink-900: #15141A;

  /* ─── Semantic ──────────────────────────────────────────────── */
  --ok-50:   #ECFDF5;
  --ok-500:  #16A34A;
  --ok-600:  #15803D;
  --warn-50: #FFFBEB;
  --warn-500:#F59E0B;
  --warn-600:#B45309;
  --bad-50:  #FEF2F2;
  --bad-500: #DC2626;
  --bad-600: #B91C1C;
  --info-50: #EFF6FF;
  --info-500:#3B82F6;

  /* ─── Type ──────────────────────────────────────────────────── */
  --font-display: "Playfair Display", Georgia, serif;        /* logo + headings de marca */
  --font-sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* fluid type scale */
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  30px;
  --t-3xl:  38px;
  --t-4xl:  48px;
  --t-5xl:  64px;

  /* ─── Spacing (4-pt rhythm) ───────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ─── Radius ──────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ─── Shadow ──────────────────────────────────────────────── */
  --sh-xs: 0 1px 2px rgba(20, 14, 24, 0.05);
  --sh-sm: 0 1px 3px rgba(20, 14, 24, 0.06), 0 1px 2px rgba(20, 14, 24, 0.04);
  --sh-md: 0 4px 12px rgba(20, 14, 24, 0.06), 0 2px 4px rgba(20, 14, 24, 0.04);
  --sh-lg: 0 12px 28px rgba(20, 14, 24, 0.08), 0 4px 10px rgba(20, 14, 24, 0.04);
  --sh-pink: 0 8px 24px rgba(233, 30, 120, 0.18);

  /* ─── Surfaces (overridden per theme) ──────────────────── */
  --bg-app:    #FAFAF9;          /* page background */
  --bg-surface:#FFFFFF;          /* cards, sheets */
  --bg-soft:   #F4F4F2;          /* subtle fills */
  --border:    #E7E6E2;
  --text:      #15141A;
  --text-soft: #52514D;
  --text-mute: #A1A09A;
}

/* ─── Theme: Temática (cream + more pink warmth) ─────────────── */
[data-theme="tematica"] {
  --bg-app:    #FDFAF3;
  --bg-surface:#FFFFFF;
  --bg-soft:   #FBF4E4;
  --border:    #EFE4CC;
  --text:      #232321;
  --text-soft: #52514D;
}

/* ─── Theme: Clean (default — already set above, kept explicit) */
[data-theme="clean"] {
  --bg-app:    #FAFAF9;
  --bg-surface:#FFFFFF;
  --bg-soft:   #F4F4F2;
  --border:    #E7E6E2;
}

/* Tabular numbers helper */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }