/* Mia — Design tokens
 * Source of truth for colors, typography, spacing.
 * Apply to any Mia asset Claude Design produces. */

:root {
  /* ---------- Colors ---------- */

  /* Surfaces */
  --mia-cream:          #F7F1E8;  /* primary background */
  --mia-cream-warm:     #F1E9DC;  /* secondary cream (cards, sections) */
  --mia-cream-soft:     #FAF5EE;  /* lightest cream for tight contrast */

  /* Accents (warm editorial palette) */
  --mia-terracotta:     #B5634B;  /* primary brand accent, logo ring */
  --mia-terracotta-light: #C77862;
  --mia-terracotta-deep:  #8B4A3A;
  --mia-amber:          #C27821;  /* secondary — call-outs, highlights, logo dot */
  --mia-amber-light:    #D68A30;
  --mia-sage:           #7A8F72;  /* tertiary — balance, calm */
  --mia-sand:           #D4B896;  /* neutral warm, supporting */
  --mia-purple:         #9B7CA6;  /* use sparingly — mystery, privacy */

  /* Text */
  --mia-ink:            #1C1917;  /* primary text */
  --mia-ink-warm:       #2B1810;  /* warmer primary text */
  --mia-muted:          #6B4E3E;  /* secondary text, body copy */
  --mia-faint:          #A89E92;  /* tertiary text, metadata */

  /* ---------- Typography ---------- */

  /* Font families — load via Google Fonts */
  --mia-f-display:   "Fraunces", Georgia, "Iowan Old Style", serif;    /* editorial hero, pull-quotes (italic weights) */
  --mia-f-head:      "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;  /* titles, wordmark, UI headings */
  --mia-f-body:      "Source Sans 3", system-ui, sans-serif;           /* body copy, metadata */
  --mia-f-hand:      "Caveat", cursive;                                /* handwritten accents, diary overlays */

  /* Type scale (mobile-first, scales up fluidly on larger canvases) */
  --mia-fs-hero:     108px;   /* carousel slide title */
  --mia-fs-xl:       84px;
  --mia-fs-lg:       60px;
  --mia-fs-md:       48px;
  --mia-fs-body:     36px;    /* 1080x1350 canvas body */
  --mia-fs-sm:       28px;
  --mia-fs-xs:       22px;

  --mia-lh-tight:    1.02;
  --mia-lh-snug:     1.15;
  --mia-lh-body:     1.4;
  --mia-lh-loose:    1.55;

  --mia-tracking-title:  -0.035em;
  --mia-tracking-body:   0;
  --mia-tracking-label:  0.22em;  /* uppercase labels */

  /* ---------- Spacing ---------- */

  --mia-sp-1:   4px;
  --mia-sp-2:   8px;
  --mia-sp-3:   12px;
  --mia-sp-4:   16px;
  --mia-sp-6:   24px;
  --mia-sp-8:   32px;
  --mia-sp-12:  48px;
  --mia-sp-16:  64px;
  --mia-sp-24:  96px;
  --mia-sp-32:  128px;

  /* ---------- Radius ---------- */

  --mia-radius-sm:  6px;
  --mia-radius-md:  12px;
  --mia-radius-lg:  20px;
  --mia-radius-xl:  44px;   /* phone mockups, cards */
  --mia-radius-pill: 999px;

  /* ---------- Shadow ---------- */

  --mia-shadow-sm:  0 2px 6px rgba(40,24,14,0.08);
  --mia-shadow-md:  0 12px 26px rgba(40,24,14,0.14);
  --mia-shadow-lg:  0 22px 44px rgba(40,24,14,0.28);
}

/* ---------- Brand utility classes ---------- */

.mia-display {
  font-family: var(--mia-f-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mia-headline {
  font-family: var(--mia-f-head);
  font-weight: 800;
  letter-spacing: var(--mia-tracking-title);
  line-height: var(--mia-lh-tight);
}

.mia-label {
  font-family: var(--mia-f-body);
  font-weight: 600;
  letter-spacing: var(--mia-tracking-label);
  text-transform: uppercase;
  font-size: var(--mia-fs-xs);
}

.mia-handwritten {
  font-family: var(--mia-f-hand);
  font-weight: 600;
}

/* Soft watercolor panel for readability behind text over illustrations */
.mia-readability-band {
  position: absolute;
  left: 0; right: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(247,241,232,0) 0%,
    rgba(247,241,232,0.80) 30%,
    rgba(247,241,232,0.80) 70%,
    rgba(247,241,232,0) 100%);
}