/* ============================================================
   GoLiveIQ design tokens
   Light is the default. Dark applies two ways:
   1. system preference, unless the user forced light
   2. an explicit [data-theme="dark"] set by the toggle
   Every color is defined on bare :root first, then overridden.
   ============================================================ */

:root {
  /* surfaces */
  --bg-primary:    #FAFAF8;
  --bg-secondary:  #F3F2EF;   /* warm off white */
  --bg-cream:      #FFFAF5;   /* warm hero / card wash */
  --bg-tertiary:   #EBEBEA;
  --bg-card:       #FFFFFF;
  --bg-hover:      rgba(0,0,0,0.05);

  /* lines */
  --border-color:  rgba(200,200,196,0.7);
  --border-strong: #C8C8C4;

  /* ink */
  --text-primary:   #1A1A1A;  /* near black, never pure #000 */
  --text-secondary: #4B5563;
  --text-tertiary:  #9CA3AF;

  /* the one orange */
  --accent:        #E85D2D;
  --accent-light:  #FF7A4D;
  --accent-wash:   #FFF0E8;
  --accent-ink:    #FFFFFF;   /* text that sits on the orange */

  /* status */
  --status-ok:       #16A34A;
  --status-progress: #E8A33D;
  --status-blocked:  #DC2626;
  --status-idle:     #C0C0C3;

  /* faint engineering grid */
  --grid-dot:  rgba(0,0,0,0.05);
  --grid-size: 24px;

  /* topology line color */
  --line-stroke: rgba(0,0,0,0.32);

  /* type families */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* soft, low shadows */
  --shadow-rest:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-hover: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-pop:   0 10px 30px rgba(0,0,0,0.12);

  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  color-scheme: light;
}

/* ---- dark, via system preference (unless user forced light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:    #0F0F10;
    --bg-secondary:  #1A1A1D;
    --bg-cream:      #1C1A18;
    --bg-tertiary:   #26262A;
    --bg-card:       #1D1D20;
    --bg-hover:      rgba(255,255,255,0.05);

    --border-color:  rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);

    --text-primary:   #EDEDED;
    --text-secondary: #A0A0A6;
    --text-tertiary:  #64646B;

    --accent:        #F06A1E;
    --accent-light:  #FF894E;
    --accent-wash:   rgba(240,106,30,0.12);
    --accent-ink:    #FFFFFF;

    --status-ok:       #22C55E;
    --status-progress: #F0B44C;
    --status-blocked:  #EF4444;
    --status-idle:     #4B4B52;

    --grid-dot: rgba(255,255,255,0.04);
    --line-stroke: rgba(255,255,255,0.40);

    --shadow-rest:  0 1px 2px rgba(0,0,0,0.4);
    --shadow-hover: 0 4px 14px rgba(0,0,0,0.5);
    --shadow-pop:   0 10px 30px rgba(0,0,0,0.6);

    color-scheme: dark;
  }
}

/* ---- dark, forced by the toggle (wins over everything) ---- */
:root[data-theme="dark"] {
  --bg-primary:    #0F0F10;
  --bg-secondary:  #1A1A1D;
  --bg-cream:      #1C1A18;
  --bg-tertiary:   #26262A;
  --bg-card:       #1D1D20;
  --bg-hover:      rgba(255,255,255,0.05);

  --border-color:  rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  --text-primary:   #EDEDED;
  --text-secondary: #A0A0A6;
  --text-tertiary:  #64646B;

  --accent:        #F06A1E;
  --accent-light:  #FF894E;
  --accent-wash:   rgba(240,106,30,0.12);
  --accent-ink:    #FFFFFF;

  --status-ok:       #22C55E;
  --status-progress: #F0B44C;
  --status-blocked:  #EF4444;
  --status-idle:     #4B4B52;

  --grid-dot: rgba(255,255,255,0.04);
  --line-stroke: rgba(255,255,255,0.40);

  --shadow-rest:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-hover: 0 4px 14px rgba(0,0,0,0.5);
  --shadow-pop:   0 10px 30px rgba(0,0,0,0.6);

  color-scheme: dark;
}