/* A Plus — Color tokens
   Neutral-dominant system: ~75% neutral, 20% blue, 5% orange.
   Base values + semantic aliases. */

:root {
  /* ---- Neutrals (the foundation — use these most) ---- */
  --white: #FFFFFF;     /* primary background, cards, surfaces */
  --cloud: #F5F5F7;     /* alternating sections, subtle panels */
  --mist:  #E8E8ED;     /* borders, dividers, hairlines */
  --ink:   #1D1D1F;     /* primary text, headlines (never pure #000) */
  --slate: #6E6E73;     /* secondary text, descriptions */
  --graphite: #86868B;  /* captions, metadata, disabled text */

  /* ---- A Plus Blue (the brand accent) ---- */
  --blue-tint:   #E8F1FF; /* soft backgrounds, highlight blocks, badge fills */
  --blue-soft:   #4D8BFF; /* hover on tints, secondary accents, blue-on-dark */
  --blue:        #0A66FF; /* brand blue: accents, icons, focus rings, the "A" */
  --blue-strong: #0A4DCC; /* links + solid button fills (AA on white) */

  /* ---- A Plus Orange (the + spark — use sparingly) ---- */
  --orange-tint:   #FFF0E6; /* rare highlight backgrounds */
  --orange:        #FF6B00; /* the + in the logo; primary CTA accent */
  --orange-strong: #E55F00; /* pressed/hover for orange elements */
  --orange-bright: #FF7A1A; /* orange lifted one step for dark surfaces */

  /* ---- Semantic ---- */
  --success: #1FA463;
  --warning: #F5A623;
  --error:   #E5484D;
  --info:    #0A66FF;

  /* ---- Dark surfaces (hero/footer moments) ---- */
  --ink-bg:      #1D1D1F;
  --ink-surface: #2C2C2E;
  --on-dark:     #F5F5F7;

  /* ---- Semantic aliases (prefer these in components) ---- */
  --bg-page:        var(--white);
  --bg-subtle:      var(--cloud);
  --surface-card:   var(--white);
  --border-hairline:var(--mist);

  --text-primary:   var(--ink);
  --text-secondary: var(--slate);
  --text-muted:     var(--graphite);
  --text-on-accent: var(--white);
  --text-link:      var(--blue-strong);

  --accent:         var(--blue);
  --accent-solid:   var(--blue-strong);
  --accent-tint:    var(--blue-tint);
  --spark:          var(--orange);

  --focus-ring:     var(--blue);
}