/* ============================================================
   Photobooth Goa — Color Tokens
   60% neutral (charcoal/white/cream) · 30% surfaces · 10% accent
   ============================================================ */
:root {
  /* ---- Base neutrals: warm charcoal → cream ---- */
  --ink-900: #16100F;   /* deepest, near-black warm charcoal */
  --ink-800: #1F1819;   /* primary dark surface */
  --ink-700: #2C2426;   /* raised dark surface */
  --ink-600: #463B3D;   /* dark border / muted on dark */
  --ink-400: #8A7C7E;   /* muted text */
  --ink-300: #B7ABAC;   /* disabled / faint */

  --cream-50: #FFF8F0;  /* soft cream page bg */
  --cream-100: #FBEFE2; /* cream card / section */
  --sand-200: #F1E6DA;  /* warm divider / fill */
  --sand-300: #E3D5C6;  /* stronger warm border */
  --white: #FFFFFF;

  /* ---- Accent: Sunset Coral (primary, the 10%) ---- */
  --coral-50:  #FFEEF1;
  --coral-100: #FFD3DC;
  --coral-300: #FF89A0;
  --coral-500: #FF4D6D;  /* primary brand accent / CTA */
  --coral-600: #ED2F53;  /* hover / pressed */
  --coral-700: #C71F3F;

  /* ---- Highlight: Tropical Teal ---- */
  --teal-100: #C7F4EE;
  --teal-400: #2BD4BE;
  --teal-500: #0FB9A8;
  --teal-600: #0A938688;

  /* ---- Highlight: Festive Gold ---- */
  --gold-100: #FFEFCB;
  --gold-400: #FFC55C;
  --gold-500: #FFB23E;

  /* ---- Status ---- */
  --success: #1FAE6B;
  --warning: #F59E0B;
  --danger:  #E5484D;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  /* Page & surfaces (light, the default brand context) */
  --bg-page: var(--cream-50);
  --surface-card: var(--white);
  --surface-muted: var(--cream-100);
  --surface-sand: var(--sand-200);
  --surface-dark: var(--ink-800);

  /* Text */
  --text-strong: var(--ink-900);
  --text-body: #34292B;
  --text-muted: var(--ink-400);
  --text-on-accent: var(--white);
  --text-on-dark: var(--cream-50);
  --text-on-dark-muted: #B6A9AB;

  /* Brand accent roles */
  --accent: var(--coral-500);
  --accent-hover: var(--coral-600);
  --accent-soft: var(--coral-50);
  --accent-contrast: var(--white);
  --highlight-teal: var(--teal-500);
  --highlight-gold: var(--gold-500);

  /* Borders & dividers */
  --border-subtle: var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong: var(--ink-900);
  --border-on-dark: var(--ink-600);

  /* Focus ring */
  --ring: var(--coral-500);
}