/* ============================================================
   COLORS — Gonzalo Yokota
   Five saturated brand accents over a four-step warm-neutral
   base, anchored by a near-black ink + four grays.
   Accents are used SPARINGLY (highlights, CTAs, icon fills) —
   never as full-page backgrounds.
   ============================================================ */

:root {
  /* ---- BRAND ACCENTS ---- */
  --color-primary:   #5DCDF1; /* sky blue  — primary actions, links, hand-drawn flourishes */
  --color-secondary: #FD976D; /* coral     — CTAs, "subscribe", warm emphasis */
  --color-tertiary:  #FDD46B; /* yellow    — playful highlights, icon fills */
  --color-accent:    #C9B1FB; /* lilac     — secondary accent */
  --color-accent-2:  #79D287; /* green     — success / positive accent */

  /* ---- WARM NEUTRAL SURFACES ---- */
  --color-bg-1: #FFFFFF; /* pure white — cards on tinted surfaces */
  --color-bg-2: #F9F6F3; /* cream      — default page background */
  --color-bg-3: #F3EDE9; /* warm sand  — alternating sections */
  --color-bg-4: #ECE5E1; /* beige      — inputs, chips, dividers */

  /* ---- INK / FOREGROUND ---- */
  --color-fg-1: #1B1624; /* near-black ink, faint purple cast — headings & body */
  --color-fg-2: #54505B; /* muted body text */
  --color-fg-3: #76737C; /* captions, secondary labels */
  --color-fg-4: #8D8A91; /* placeholders, disabled */
  --color-ink-navy: #060C39; /* deep navy — social glyphs / footer */

  /* ---- TINTED ACCENT WASHES (10% over cream — soft section blocks) ---- */
  --tint-primary:   #E3F4FC;
  --tint-secondary: #FEEBE1;
  --tint-tertiary:  #FEF5DC;
  --tint-accent:    #F2ECFE;
  --tint-accent-2:  #E6F5E8;

  /* ---- SEMANTIC ALIASES ---- */
  --surface-page:    var(--color-bg-2);
  --surface-alt:     var(--color-bg-3);
  --surface-card:    var(--color-bg-1);
  --surface-sunken:  var(--color-bg-4);
  --text-strong:     var(--color-fg-1);
  --text-body:       var(--color-fg-2);
  --text-muted:      var(--color-fg-3);
  --text-faint:      var(--color-fg-4);
  --border-subtle:   var(--color-bg-4);
  --action-primary:  var(--color-primary);
  --action-cta:      var(--color-secondary);
  --focus-ring:      var(--color-primary);
  --success:         var(--color-accent-2);
}