/* ============================================================
   COLORS
   Cool, modern base (cobalt primary + cool neutrals) carrying
   the warm, playful spirit of the brand (coral secondary +
   pastel surfaces).
   ============================================================ */
:root {
  /* ---- Neutrals — cool gray ramp ---- */
  --ink-900: #0E1525; /* strongest text, near-black navy */
  --ink-800: #18203A;
  --ink-700: #283457; /* body text */
  --ink-600: #424F71;
  --ink-500: #67728F; /* muted text */
  --ink-400: #8C95AE;
  --ink-300: #B7BECF;
  --ink-200: #DBE0EB; /* hairline borders */
  --ink-150: #E6EAF2;
  --ink-100: #EFF2F8;
  --ink-50:  #F6F8FC; /* subtle surface */
  --paper:      #FBFCFE; /* cool page background */
  --paper-warm: #FCF7F2; /* warm cream alternate background */
  --white: #FFFFFF;

  /* ---- Primary — deep indigo-navy blue ---- */
  --blue-700: #1D2A63;
  --blue-600: #2B3A82; /* primary — deep, refined, less electric */
  --blue-500: #3A4DA0;
  --blue-400: #6E7EC4;
  --blue-300: #9AA6D8;
  --blue-200: #C6CDEA;
  --blue-100: #E5E8F6;
  --blue-50:  #F2F4FB;

  /* ---- Secondary — rose (vivid pink, playful) ---- */
  --coral-700: #A82152;
  --coral-600: #C72E6B;
  --coral-500: #E84A86; /* accent */
  --coral-400: #F178A4;
  --coral-200: #F9C2D6;
  --coral-100: #FCE0EA;
  --coral-50:  #FEF1F6;

  /* ---- Pastel surfaces — for section cards & playful blocks ---- */
  --pastel-sky:    #C2E2E6;
  --pastel-peri:   #CBD6F4; /* periwinkle */
  --pastel-coral:  #FBCDC2;
  --pastel-mint:   #CDE9D4;
  --pastel-butter: #F6E3B6;
  --pastel-lilac:  #DDD2F0;

  /* ---- Semantic hues ---- */
  --green-600: #1E8E5A;
  --green-100: #DCF3E7;
  --amber-600: #C9821A;
  --amber-100: #FBEACB;
  --red-600:   #D63A2E;
  --red-100:   #FBE0DD;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --color-bg:        var(--paper);
  --color-bg-warm:   var(--paper-warm);
  --color-surface:   var(--white);
  --color-surface-2: var(--ink-50);
  --color-surface-3: var(--ink-100);

  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --text-on-fill: #FFFFFF;
  --text-link:    var(--blue-600);

  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-press:  var(--blue-700);
  --color-primary-wash:   var(--blue-100);
  --color-primary-tint:   var(--blue-200);
  --color-on-primary:     #FFFFFF;

  --color-accent:       var(--coral-500);
  --color-accent-hover: var(--coral-600);
  --color-accent-wash:  var(--coral-100);
  --color-on-accent:    #FFFFFF;

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --color-success: var(--green-600);
  --color-success-wash: var(--green-100);
  --color-warning: var(--amber-600);
  --color-warning-wash: var(--amber-100);
  --color-danger:  var(--red-600);
  --color-danger-wash:  var(--red-100);

  --focus-ring: color-mix(in srgb, var(--color-primary) 42%, transparent);

  /* Signature soft brand gradient (hero washes) — cool + a warm kiss */
  --gradient-brand: linear-gradient(135deg, #EAF0FF 0%, #F3F6FE 38%, #FDF4F0 100%); /* @kind other */
  --gradient-cool:  linear-gradient(150deg, #E9EEFF 0%, #DCEBEC 100%); /* @kind other */
}

/* ============================================================
   ACCENT THEME — opt in with [data-accent="coral"] on a wrapper
   to flip the primary to the warm coral (closer to the legacy
   site). Lets you explore warm vs. cool without rewriting code.
   ============================================================ */
[data-accent="coral"] {
  --color-primary:       var(--coral-500);
  --color-primary-hover: var(--coral-600);
  --color-primary-press: var(--coral-700);
  --color-primary-wash:  var(--coral-100);
  --color-primary-tint:  var(--coral-200);
  --color-on-primary:    #FFFFFF;
  --color-accent:        var(--blue-600);
  --color-accent-hover:  var(--blue-700);
  --color-accent-wash:   var(--blue-100);
  --focus-ring: color-mix(in srgb, var(--coral-500) 42%, transparent);
}

/* ============================================================
   DARK INK SURFACE — opt in with [data-surface="ink"] for
   footers / full-bleed dark sections.
   ============================================================ */
[data-surface="ink"] {
  --color-bg:        var(--ink-900);
  --color-surface:   var(--ink-800);
  --color-surface-2: var(--ink-700);
  --text-strong:  #FFFFFF;
  --text-body:    var(--ink-200);
  --text-muted:   var(--ink-300);
  --text-faint:   var(--ink-400);
  --border:        rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
}