/*
 * VibeGate console — tokens.
 *
 * Dark-first and deliberately sharp: 2px radii, hard borders, no soft
 * shadows. This is an instrument panel, not a marketing page — it is read at a
 * glance while something expensive is running, so contrast does the work that
 * decoration usually does.
 *
 * Every colour is defined on bare :root first. The dark block only redefines
 * tokens, so a value can never exist in one theme and not the other.
 */

:root {
  color-scheme: light dark;

  /* Neutrals carry a slight cool bias toward the accent, so greys read as
     chosen rather than inherited. */
  --bg:            #0b0e11;
  --bg-raised:     #12161b;
  --bg-sunken:     #080a0d;
  --border:        #222a33;
  --border-strong: #313c48;

  --text:          #e6edf3;
  --text-dim:      #8b98a6;
  --text-faint:    #5b6874;

  /* The green the progress bars are built on. */
  --go:            #21d07a;
  --go-track:      #16301f;

  --warn:          #ffb224;
  --warn-track:    #33260c;
  --stop:          #ff5c5c;
  --stop-track:    #331717;
  --accent:        #4d9fff;
  --accent-track:  #12243a;

  --free:          #21d07a;
  --paid:          #ffb224;

  --radius:        2px;
  --radius-pill:   999px;

  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap:    12px;
  --gap-lg: 20px;
  --gap-xl: 32px;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;

  --step--1: clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem);
  --step-0:  clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-1:  clamp(1.00rem, 0.94rem + 0.3vw, 1.18rem);
  --step-2:  clamp(1.32rem, 1.20rem + 0.6vw, 1.70rem);
  --step-3:  clamp(1.80rem, 1.55rem + 1.2vw, 2.60rem);
}

/* The light theme is the redefinition here, because the design is dark-first
   and the roles must swap consistently rather than partially. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:            #f4f6f8;
    --bg-raised:     #ffffff;
    --bg-sunken:     #e7ebef;
    --border:        #d2dae2;
    --border-strong: #aab6c2;

    --text:          #10151a;
    --text-dim:      #566371;
    --text-faint:    #8593a1;

    --go:            #0f9f58;
    --go-track:      #d3f0e0;
    --warn:          #b76e00;
    --warn-track:    #f8e8cc;
    --stop:          #d02f2f;
    --stop-track:    #f7d9d9;
    --accent:        #1f6feb;
    --accent-track:  #d9e7fb;

    --free:          #0f9f58;
    --paid:          #b76e00;
  }
}

:root[data-theme="light"] {
  --bg:            #f4f6f8;
  --bg-raised:     #ffffff;
  --bg-sunken:     #e7ebef;
  --border:        #d2dae2;
  --border-strong: #aab6c2;

  --text:          #10151a;
  --text-dim:      #566371;
  --text-faint:    #8593a1;

  --go:            #0f9f58;
  --go-track:      #d3f0e0;
  --warn:          #b76e00;
  --warn-track:    #f8e8cc;
  --stop:          #d02f2f;
  --stop-track:    #f7d9d9;
  --accent:        #1f6feb;
  --accent-track:  #d9e7fb;

  --free:          #0f9f58;
  --paid:          #b76e00;
}

:root[data-theme="dark"] {
  --bg:            #0b0e11;
  --bg-raised:     #12161b;
  --bg-sunken:     #080a0d;
  --border:        #222a33;
  --border-strong: #313c48;

  --text:          #e6edf3;
  --text-dim:      #8b98a6;
  --text-faint:    #5b6874;

  --go:            #21d07a;
  --go-track:      #16301f;
  --warn:          #ffb224;
  --warn-track:    #33260c;
  --stop:          #ff5c5c;
  --stop-track:    #331717;
  --accent:        #4d9fff;
  --accent-track:  #12243a;

  --free:          #21d07a;
  --paid:          #ffb224;
}