/* ============================================================
   Complete Aesthete — Color Tokens
   ------------------------------------------------------------
   The CA system is one elegant design re-skinned across several
   "colorways". Each colorway is a 5-step scale (deep → pale) plus
   a watercolor accent. Semantic tokens default to SOMETHING BLUE
   (the signature colorway); switch the whole palette with a theme
   class — see tokens/themes.css.
   ============================================================ */

:root {
  /* ---- Brand mark ---- */
  --ca-teal:        #82d2d4;   /* logo background teal           */
  --ca-teal-deep:   #56b6b8;
  --ca-teal-soft:   #d9f1f1;

  /* ---- Ink & neutrals (warm-cool greys on paper) ---- */
  --ink:            #20232a;   /* primary text / monogram        */
  --charcoal:       #3a3d44;
  --slate:          #6e7178;   /* secondary text                 */
  --mute:           #9a9ca3;   /* tertiary / placeholder         */
  --line:           #e4e2dd;   /* hairline borders               */
  --pearl:          #ececec;   /* watermark grey                 */
  --porcelain:      #faf9f6;   /* off-white surface              */
  --paper:          #ffffff;   /* the page                       */
  --taupe:          #8a7e6e;   /* stone label text (colorway names) */

  /* ============ COLORWAY SCALES ============ */

  /* —— Something Blue (signature) — official palette —— */
  --blue-900: #0e2356;   /* midnight navy   (official) */
  --blue-700: #2c4c82;   /* royal           (derived)  */
  --blue-500: #4b729f;   /* slate blue      (official) */
  --blue-300: #8aa3c2;   /* dusty blue      (official) */
  --blue-100: #b4c9dc;   /* soft powder blue(official) */
  --blue-050: #eaf1f7;   /* mist            (derived)  */
  --blue-wc:  #7da0cd;   /* watercolor ribbon accent   */

  /* —— Petal Pink — official palette —— */
  --pink-900: #9a2c8e;   /* plum            (derived)  */
  --pink-700: #c842b9;   /* dark pink       (official) */
  --pink-500: #e294c6;   /* medium pink     (official) */
  --pink-300: #e5a3e8;   /* light mauve     (official) */
  --pink-100: #f6c1ee;   /* soft blush      (official) */
  --pink-050: #fbeaf7;   /* blush mist      (derived)  */
  --pink-wc:  #e79fdd;   /* watercolor accent          */

  /* —— Sage Serenity — official palette —— */
  --sage-900: #3f6e45;   /* forest          (derived)  */
  --sage-700: #639a67;   /* deep sage       (official) */
  --sage-500: #7bb080;   /* medium sage     (official) */
  --sage-300: #a5c7a2;   /* light sage      (official) */
  --sage-100: #c1d1c2;   /* pale eucalyptus (official) */
  --sage-050: #e9f1e9;   /* mist            (derived)  */
  --sage-wc:  #84b98a;   /* watercolor accent          */

  /* —— Golden Hour — official palette (high-contrast gold + charcoal) —— */
  --gold-900: #0d0e10;   /* deep charcoal   (official) */
  --gold-700: #b0822f;   /* deep gold ink   (derived, readable on white) */
  --gold-500: #ebb867;   /* classic gold    (official) */
  --gold-300: #e5c28c;   /* soft champagne  (official) */
  --gold-100: #e5d9c4;   /* warm cream      (official) */
  --gold-050: #f7f0e3;   /* cream wash      (derived)  */
  --gold-wc:  #dab264;   /* watercolor accent          */

  /* ---- Functional ---- */
  --success: #3e8e5f;
  --error:   #c2503e;
  --focus:   color-mix(in srgb, var(--accent) 55%, white);
}

/* ============ SEMANTIC TOKENS ============
   Default = Something Blue. Theme classes remap these (themes.css).
   Build components against THESE, not the raw scale, so a single
   wrapper class re-skins the whole UI.                            */
:root {
  --accent-deep:  var(--blue-900);   /* headings on light, deep wells */
  --accent:       var(--blue-700);   /* primary actions, links        */
  --accent-mid:   var(--blue-500);   /* secondary fills               */
  --accent-soft:  var(--blue-300);   /* borders, muted accents        */
  --accent-tint:  var(--blue-100);   /* chips, hovers                 */
  --accent-wash:  var(--blue-050);   /* page tints, table stripes     */
  --accent-wc:    var(--blue-wc);    /* watercolor / illustration     */

  --text-strong:  var(--ink);
  --text-body:    var(--charcoal);
  --text-muted:   var(--slate);
  --text-onAccent:#ffffff;
  --text-script:  var(--accent);     /* the signature-script accent ink */

  --surface-page: var(--paper);
  --surface-card: var(--paper);
  --surface-sunken: var(--porcelain);
  --surface-tint: var(--accent-wash);
  --border-soft:  var(--line);
  --border-accent:var(--accent-soft);
}