/* ==========================================================================
   (De)Scaling Madrid — Color tokens
   Madrid azulejo (ceramic-tile) palette: cobalt blue, warm off-white,
   marigold yellow, Spanish green. Sampled from the event key art.
   ========================================================================== */

:root {
  /* --- Base ramp: Cobalt (primary brand blue) --- */
  --cobalt-900: #00005C;
  --cobalt-800: #00006E;
  --cobalt-700: #000080;
  --cobalt:     #000095;   /* core brand blue */
  --cobalt-500: #1A1FB0;
  --cobalt-400: #3D44C9;
  --cobalt-200: #9DA2E4;
  --cobalt-100: #C9CCF1;

  /* --- Base ramp: Cream (warm off-white paper) --- */
  --cream-50:  #FAF6EF;
  --cream:     #F2E9E0;    /* core surface */
  --cream-200: #E8DDCE;    /* hairlines, subtle fills on cream */
  --cream-300: #DCCFB9;    /* stronger tile edge */

  /* --- Base ramp: Marigold (accent yellow) --- */
  --marigold-600: #C98A00;
  --marigold-500: #E0A300;
  --marigold:     #FDB800;  /* core accent */
  --marigold-300: #FFD45E;
  --marigold-100: #FFEBB8;

  /* --- Base ramp: Verde (Spanish green) --- */
  --verde-700: #0E4427;
  --verde:     #16613A;    /* core green */
  --verde-500: #1F8048;
  --verde-300: #6FB68C;
  --verde-100: #CDE5D7;

  /* --- Neutrals --- */
  --ink:    #12123A;        /* near-black with a cobalt cast — fine print */
  --white:  #FFFFFF;
  --black:  #0A0A12;

  /* ======================================================================
     Semantic aliases — reference THESE in components, not the raw ramps.
     ====================================================================== */

  /* Surfaces */
  --bg:               var(--cream);
  --surface:          var(--cream);
  --surface-raised:   var(--white);
  --surface-cobalt:   var(--cobalt);     /* inverted / "spotlight" panels */
  --surface-verde:    var(--verde);
  --surface-marigold: var(--marigold);

  /* Text on cream */
  --text:          var(--cobalt);        /* primary text is cobalt, not black */
  --text-strong:   var(--cobalt-900);
  --text-muted:    color-mix(in srgb, var(--cobalt) 55%, var(--cream));
  --text-ink:      var(--ink);

  /* Text on cobalt */
  --text-on-cobalt:        var(--cream);
  --text-on-cobalt-muted:  var(--cobalt-200);
  --text-on-cobalt-accent: var(--marigold);

  /* Accents & lines */
  --accent:        var(--marigold);
  --accent-2:      var(--verde);
  --line:          var(--cream-200);
  --line-strong:   var(--cobalt);
  --line-on-cobalt: color-mix(in srgb, var(--cream) 28%, transparent);

  /* States */
  --focus-ring:    var(--marigold);
  --selection-bg:  var(--marigold);
  --selection-fg:  var(--cobalt-900);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }