/* ============================================================
   Chloeta — Color Tokens
   Sourced from the Chloeta Brand Guide (Visual Identity →
   Primary / Secondary Colors; Color Palette for Web).

   Usage ratio (from "Using the Color Palette"):
     Primary  ~60%   Black grounds everything, White is the
                     dominant surface, Red is the single accent.
     Secondary ~30%  Grays support; never used as a lone spot
                     color without a primary.
     Accent   ~10%   Red for action; status colors sparingly.
   ============================================================ */

:root {
  /* --- Primary palette --- */
  --chloeta-black: #101820;   /* rgb(16, 24, 32)  — grounding, primary text */
  --chloeta-red:   #AB2328;   /* rgb(171, 35, 40) — the brand accent / action */
  --chloeta-white: #FFFFFF;   /* rgb(255,255,255) — dominant surface */

  /* --- Secondary palette (neutrals) --- */
  --gray-01: #F2F1F1;         /* rgb(242,241,241) — light fills, hairlines */
  --gray-02: #B2B3B3;         /* rgb(178,179,179) — borders, disabled, muted */
  --gray-03: #54565B;         /* rgb(84, 86, 91)  — secondary buttons, body-2 */

  /* --- Red, tonal steps (derived for hover / press / tints) --- */
  --red-700: #8C1C20;         /* press / active — darker */
  --red-600: #AB2328;         /* base brand red */
  --red-100: #F6E3E4;         /* 8% tint — callout fills, soft badges */

  /* --- Black, tonal steps (derived for elevation / lines) --- */
  --ink-900: #101820;         /* brand black */
  --ink-700: #1E2832;         /* raised dark surface */
  --ink-500: #54565B;         /* = gray-03, secondary text on light */

  /* --- Status / semantic (from "Graphic Elements & Patterns") --- */
  --status-success: #00AA44;  /* active / available / safe */
  --status-warning: #FFCC00;  /* caution */
  --status-danger:  #AB2328;  /* alert / danger — uses brand red */
  --status-info:    #4973E8;  /* information */
  --status-muted:   #B2B3B3;  /* disabled / inactive */

  /* ==========================================================
     Semantic aliases — reference THESE in components.
     ========================================================== */

  /* Text */
  --text-strong:    var(--chloeta-black);  /* headings, primary copy */
  --text-body:      var(--ink-700);        /* long-form body on light */
  --text-muted:     var(--gray-03);        /* captions, meta, labels */
  --text-inverse:   var(--chloeta-white);  /* text on dark / red */
  --text-accent:    var(--chloeta-red);    /* links, emphasis */

  /* Surfaces */
  --surface-page:   var(--chloeta-white);  /* default background */
  --surface-subtle: var(--gray-01);        /* alternating sections, fills */
  --surface-card:   var(--chloeta-white);  /* card background */
  --surface-dark:   var(--chloeta-black);  /* dark hero / footer */
  --surface-dark-2: var(--ink-700);        /* raised panel on dark */

  /* Lines & borders */
  --border-subtle:  var(--gray-01);        /* hairline dividers */
  --border-default: var(--gray-02);        /* inputs, card outlines */
  --border-strong:  var(--gray-03);        /* emphasis rules */
  --rule-accent:    var(--chloeta-red);    /* accent bars / underlines */

  /* Interactive */
  --action:         var(--chloeta-red);    /* primary button bg */
  --action-hover:   var(--red-700);        /* primary button hover/press */
  --action-2:       var(--gray-03);        /* secondary button bg */
  --action-2-hover: #43454A;               /* secondary hover */
  --focus-ring:     var(--chloeta-red);    /* keyboard focus outline */
}