/* ============================================================
   VISPORA — COLOR TOKENS
   Calm, clinically credible, warm. Teal-green core, paper ground,
   apricot reserved strictly for primary calls-to-action.
   ============================================================ */
:root {
  /* ---- Brand scale: teal-green ---- */
  --teal-900: #1a2e2a;   /* deepest, text on paper / dark surfaces */
  --teal-800: #223d38;   /* legacy deep teal — superseded as primary by --brand #425e5d */
  --teal-700: #2a4d52;   /* secondary deep teal (from materials) */
  --teal-600: #34514c;   /* slate-green */
  --teal-500: #4a6a64;   /* muted */
  --teal-400: #698d89;   /* desaturated slate-green (logo bg) */
  --teal-300: #9fb6b1;   /* soft */
  --teal-200: #c2d0c4;   /* SAGE — soft sage surface */
  --teal-100: #d9e2da;   /* faint sage tint */
  --teal-50:  #eaf0ea;   /* lightest sage wash */

  /* ---- Paper / neutral ground ---- */
  --paper:      #fafaf6;  /* off-white — primary background */
  --paper-2:    #efeae0;  /* slightly deeper paper, alt sections */
  --paper-card: #fbf9f3;  /* card surface, lifted off paper */
  --white:      #ffffff;

  /* ---- Warm apricot accent — PRIMARY CTA ONLY ---- */
  --apricot-600: #d4754d;  /* hover / pressed */
  --apricot-500: #e6906a;  /* base accent */
  --apricot-300: #f0b89c;  /* tint */
  --apricot-100: #f7ddcf;  /* faint wash, e.g. CTA halo */

  /* ---- Ink / text neutrals (warm-leaning) ---- */
  --ink-900: #3b3f38;  /* primary text on paper */
  --ink-700: #3b4a44;  /* secondary text */
  --ink-500: #5d6b64;  /* muted / captions */
  --ink-400: #7c887f;  /* placeholder, disabled text */
  --ink-300: #a7b0a8;  /* hairline-on-dark, faint */

  /* ---- Hairlines & borders ---- */
  --line-strong: #d6cfc0;  /* on paper */
  --line:        #e3ddd0;  /* default hairline */
  --line-soft:   #ece7db;  /* faint divider */
  --line-on-dark: rgba(245,241,232,0.16);

  /* ---- Semantic status (muted, clinical — never alarming) ---- */
  --success-600: #3f7a5f;
  --success-500: #5a9a78;
  --success-50:  #e4efe8;
  --warning-600: #b9852f;
  --warning-500: #d4a24a;
  --warning-50:  #f6ecd6;
  --danger-600:  #b1564f;
  --danger-500:  #c76e66;
  --danger-50:   #f4e3e1;
  --info-600:    #4a7c84;
  --info-500:    #638b94;
  --info-50:     #e2edee;

  /* ---- Extended illustration palette (charts, tags, avatars) ----
     Sampled from Vispora's own image-colour set. Use for data viz
     and decorative accents only — never as UI chrome. */
  --viz-rose:   #ad5860;
  --viz-sand:   #dba676;
  --viz-gold:   #e6c873;
  --viz-mauve:  #756f8b;
  --viz-sea:    #638b94;
  --viz-moss:   #728070;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-2);
  --bg-inverse:    #425e5d;            /* brand green — dark sections, panels, CTA bands */

  --surface:       var(--white);
  --surface-card:  var(--paper-card);
  --surface-sage:  var(--teal-200);
  --surface-sunk:  var(--paper-2);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-dark:  #ffffff;            /* headings on brand green */
  --text-on-dark-muted: #e3e7e7;       /* paragraphs on brand green */
  --text-on-accent:#ffffff;
  --text-link:     var(--teal-700);

  --brand:         #425e5d;            /* PRIMARY brand green */
  --brand-deep:    var(--teal-900);
  --brand-soft:    var(--teal-200);

  --accent:        var(--apricot-500);   /* primary CTA */
  --accent-hover:  var(--apricot-600);
  --accent-wash:   var(--apricot-100);

  --border:        var(--line);
  --border-strong: var(--line-strong);
  --border-soft:   var(--line-soft);

  --focus-ring:    rgba(52, 81, 76, 0.45);  /* slate-green focus */
}