/* Colors — Tide & Copper
   The mix: Ocean ~60%, Earth ~30%, Copper ~10%.
   Blues do the work. Browns hold the structure. Copper earns its weight by being rare. */

:root {
  /* ---- Base palette ---- */
  /* Ocean — the focus, deep to shallow */
  --deep-tide:   #14414C;  /* dark anchor · headers, dark panels, episode art */
  --ocean:       #3E8497;  /* primary · the hero blue */
  --lagoon:      #72B2BE;  /* light blue · support, hovers */
  --seaglass:    #D6E7E5;  /* pale tint · surfaces, cards, pills */

  /* Copper — the flourish (~10%, never body) */
  --copper:      #B5572F;  /* accent · links, buttons, the seam */
  --copper-glow: #CA6B3E;  /* lighter copper · hover, italics on dark */

  /* Earth — the foundation (~30%) */
  --walnut:      #6B4734;  /* grounding brown · structure, warmth */
  --driftwood:   #9A7A5D;  /* soft brown · captions, dividers */

  /* Neutrals */
  --bone:        #F5F0E7;  /* warm background · paper */
  --sand:        #EFE7D8;  /* secondary surface · callouts */
  --ink:         #16262B;  /* primary text (Deep Ink) */

  /* Derived tints used across cards & panels */
  --tide-shadow: #0F333C;  /* darker tide · rule panels on Deep Tide */
  --paper-line:  #E3D8C6;  /* hairline border on warm paper */
  --paper-line-soft: #F0E8D9;
  --body-muted:  #3A4F55;  /* body ink softened for long copy on paper */
  --body-quiet:  #5D7178;  /* captions, secondary text on paper */

  /* ---- Semantic aliases ---- */
  --surface-page:      var(--bone);
  --surface-raised:    #FFFFFF;
  --surface-card:      var(--sand);
  --surface-calm:      var(--seaglass);   /* calm zones inside dark panels */
  --surface-inverse:   var(--deep-tide);  /* dark panels */

  --text-strong:   var(--deep-tide);      /* headings on paper */
  --text-body:     var(--ink);            /* body copy */
  --text-muted:    var(--body-muted);
  --text-quiet:    var(--body-quiet);
  --text-on-dark:  #FFFFFF;
  --text-on-dark-muted: var(--seaglass);

  --accent:        var(--copper);         /* links, one button, one italic phrase */
  --accent-hover:  var(--copper-glow);
  --accent-on-dark: var(--copper-glow);

  --border-hairline: var(--paper-line);
  --focus-ring:      var(--copper);

  /* The 60/30/10 proportion, exposed for reference tooling */
  --mix-ocean: 60;  /* @kind other */
  --mix-earth: 30;  /* @kind other */
  --mix-copper: 10; /* @kind other */
}