/* ============================================================
   Planet Solara — Color System
   Sampled from the brand mark: solar-orange core, hot amber ring
   flare, deep ember-red shadow, on true space-black.
   ============================================================ */

:root {
  /* ---- Base: Space (warm-cooled near-blacks) ---- */
  --space-void:    #050506;  /* deepest background, true space */
  --space-900:     #08080b;  /* app background */
  --space-850:     #0c0c11;  /* sunken panels */
  --space-800:     #111118;  /* card surface */
  --space-750:     #16161f;  /* raised card / hover */
  --space-700:     #1d1d28;  /* elevated surface */
  --space-650:     #262633;  /* hairline-strong / inset */
  --space-600:     #33333f;  /* borders strong */

  /* ---- Solar: the core brand ramp (orange) ---- */
  --solar-100: #ffe9d6;
  --solar-200: #ffc99e;
  --solar-300: #ffa666;
  --solar-400: #ff8533;
  --solar-500: #ff6000;  /* PRIMARY — solar orange */
  --solar-600: #e85200;
  --solar-700: #c04300;
  --solar-800: #8f3200;
  --solar-900: #5c2000;

  /* ---- Amber: hot ring flare / highlight / gold ---- */
  --amber-300: #ffd28a;
  --amber-400: #ffb84d;
  --amber-500: #ffa800;  /* hot amber */
  --amber-600: #e89200;

  /* ---- Ember: deep red shadow of the planet ---- */
  --ember-400: #ff4d2e;
  --ember-500: #d8281c;
  --ember-600: #a81810;
  --ember-700: #901800;  /* deep ember (sampled) */

  /* ---- Plasma: the white-gold hottest flare ---- */
  --plasma:    #ffe6c2;

  /* ---- Cool HUD accent (data viz contrast to warm brand) ---- */
  --aurora-400: #4de3d2;
  --aurora-500: #1fc8b6;  /* nominal / online teal-cyan */
  --aurora-600: #119688;

  /* ---- Neutrals / text ---- */
  --white:     #f6f3ef;  /* warm white — never pure #fff */
  --ink-100:   #e7e2db;
  --ink-300:   #b7b1a8;  /* secondary text */
  --ink-500:   #8a857d;  /* muted / labels */
  --ink-700:   #5a564f;  /* disabled / faint */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components & UIs
     ============================================================ */

  /* Surfaces */
  --bg-app:        var(--space-900);
  --bg-void:       var(--space-void);
  --surface-sunken:var(--space-850);
  --surface-card:  var(--space-800);
  --surface-raised:var(--space-750);
  --surface-overlay:var(--space-700);
  --surface-inset: var(--space-650);

  /* Text */
  --text-strong:   var(--white);
  --text-body:     var(--ink-100);
  --text-muted:    var(--ink-300);
  --text-faint:    var(--ink-500);
  --text-disabled: var(--ink-700);
  --text-on-solar: #1a0a00;  /* dark text on bright orange fills */

  /* Brand / primary */
  --accent:        var(--solar-500);
  --accent-hover:  var(--solar-400);
  --accent-press:  var(--solar-600);
  --accent-soft:   color-mix(in oklab, var(--solar-500) 14%, transparent);
  --accent-line:   color-mix(in oklab, var(--solar-500) 38%, transparent);

  /* Borders / dividers */
  --border-subtle: color-mix(in oklab, var(--white) 7%, transparent);
  --border-default:color-mix(in oklab, var(--white) 11%, transparent);
  --border-strong: color-mix(in oklab, var(--white) 18%, transparent);
  --divider:       color-mix(in oklab, var(--white) 6%, transparent);

  /* Status — mission control HUD */
  --status-nominal:  var(--aurora-500);
  --status-active:   var(--solar-500);
  --status-caution:  var(--amber-500);
  --status-critical: var(--ember-500);
  --status-offline:  var(--ink-500);

  --status-nominal-soft:  color-mix(in oklab, var(--aurora-500) 16%, transparent);
  --status-caution-soft:  color-mix(in oklab, var(--amber-500) 16%, transparent);
  --status-critical-soft: color-mix(in oklab, var(--ember-500) 18%, transparent);
}