/* ============================================================
   Seaweed — Color tokens
   Source: Figma "SEAWEED (Copy)" Color page + brand exploration.
   Base palette = the literal brand colors. Semantic aliases map
   intent → base so components never hard-code a hex.
   ============================================================ */

:root {
  /* ---- Brand palette (literal) ---- */
  --green-algae:   #1C4842;  /* primary — deep maritime green       */
  --seafoam:       #B2C3A8;  /* secondary — soft sage/seafoam        */
  --deep-grey:     #191617;  /* near-black, the brand "black"        */
  --light-grey:    #737373;  /* muted grey for secondary text        */
  --white:         #FFFFFF;
  --off-white:     #F7F7F7;  /* page background throughout the file  */
  --hairline-grey: #9E9D9D;  /* thin rule / divider grey             */
  --sun-yellow:    #FBF273;  /* accent used in story/launch graphics */

  /* Tonal steps derived from the core greens (oklch, in-family) */
  --green-algae-900: #102E2A;
  --green-algae-700: #1C4842;
  --green-algae-500: #2E6258;
  --seafoam-300:     #C7D4BF;
  --seafoam-100:     #E3E9DD;

  /* ---- Semantic aliases ---- */
  --surface-page:      var(--off-white);
  --surface-card:      var(--white);
  --surface-inverse:   var(--deep-grey);
  --surface-brand:     var(--green-algae);
  --surface-brand-soft:var(--seafoam);
  --surface-sunken:    #EFEFEF;

  --text-primary:    var(--deep-grey);
  --text-secondary:  var(--light-grey);
  --text-on-brand:   var(--off-white);
  --text-on-dark:    var(--off-white);
  --text-inverse:    var(--white);
  --text-brand:      var(--green-algae);

  --border-subtle:   rgba(25,22,23,0.10);
  --border-strong:   var(--hairline-grey);
  --border-brand:    var(--green-algae);

  --accent:          var(--green-algae);
  --accent-soft:     var(--seafoam);
  --highlight:       var(--sun-yellow);

  --focus-ring:      rgba(28,72,66,0.35);
}