/*
 * Mochi Design Tokens
 * ─────────────────────────────────────────────────────────────
 * Single source of truth for the app's visual theme.
 * Edit values here. Matching entries in app/assets/tailwind/application.css
 * @theme generate Tailwind utility classes (bg-*, text-*, etc.) from the
 * same values. Update both files when changing a color.
 */
:root {
  /* ── Backgrounds ─────────────────────────────────────── */
  --color-bg:           #EDE8DC;   /* dusty warm parchment */
  --color-surface:      #F7F3EB;   /* soft warm white — cards, inputs */
  --color-border:       #CFC9B8;   /* aged paper border */
  --color-tinted:       #E5DFD0;   /* subtle fills, hover backgrounds */

  /* ── Text ────────────────────────────────────────────── */
  --color-text:         #2A2520;   /* deep warm brown */
  --color-text-muted:   #7A7060;
  --color-text-faint:   #ADA49A;   /* placeholder, disabled */

  /* ── Primary — muted sage green ──────────────────────── */
  --color-accent:       #7A9E7E;
  --color-accent-dark:  #5C7A5F;
  --color-accent-light: #E8F0E8;

  /* ── Warm accent — terracotta ─────────────────────────── */
  --color-accent-warm:       #C4704F;
  --color-accent-warm-dark:  #A85A3C;
  --color-accent-warm-light: #F0E0D6;

  /* ── Danger ───────────────────────────────────────────── */
  --color-danger: #A85544;        /* muted red for destructive actions */

  /* ── Typography ──────────────────────────────────────── */
  --font-sans:  'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;
  --font-serif: 'Playfair Display', Georgia, serif;

  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  2rem;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Shape ───────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-card:       0 1px 3px rgba(42,37,32,0.08);
  --shadow-card-hover: 0 4px 12px rgba(42,37,32,0.12);
}