/* =============================================================
   MacroHydro Design System — Canonical Token File
   Source of truth: macro-maker-mockup.html
   Load order: theme.css → platform-theme.css (dynamic overrides)
   ============================================================= */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:  #090d12;
  --s0:  #0e1318;
  --s1:  #141a21;
  --s2:  #1c242d;
  --s3:  #242e38;

  /* ── Text ─────────────────────────────────────────────────── */
  --text:   #e2e8f0;
  --text-2: #94a3b8;
  --text-3: #4a6180;

  /* ── Borders ──────────────────────────────────────────────── */
  --border:    rgba(255, 255, 255, 0.07);
  --border-hi: rgba(255, 255, 255, 0.14);

  /* ── Accent ───────────────────────────────────────────────── */
  --accent:   #3b82f6;
  --accent-2: #1d4ed8;

  /* ── Semantic colors ──────────────────────────────────────── */
  --color-cyan:   #06b6d4;
  --color-green:  #22c55e;
  --color-amber:  #f59e0b;
  --color-purple: #8b5cf6;
  --color-red:    #ef4444;

  /* ── Layout dimensions ────────────────────────────────────── */
  --top-h:    42px;
  --rail-w:   52px;
  --right-w:  300px;
  --bottom-h: 220px;

  /* ── Shape & motion ───────────────────────────────────────── */
  --radius:     8px;
  --radius-lg:  12px;
  --transition: 180ms ease;

  /* ── Typography ───────────────────────────────────────────── */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  /* ── Backward-compat aliases (existing CSS consumers) ─────── */
  /* Map old token names so existing site.css/manage.css/
     macromaker.css/servicehost.css continue working unchanged */
  --panel:    var(--s1);
  --panel-2:  var(--s2);
  --nav-bg:   var(--s0);
  --muted:    var(--text-2);
  --danger:   var(--color-red);

  /* ── Input tokens ─────────────────────────────────────────── */
  --input-bg:              rgba(7, 12, 24, 0.72);
  --input-bg-hover:        rgba(7, 12, 24, 0.78);
  --input-bg-focus:        rgba(7, 12, 24, 0.84);
  --input-border:          rgba(255, 255, 255, 0);
  --input-border-hover:    rgba(255, 255, 255, 0);
  --input-border-focus:    rgba(255, 255, 255, 0);
  --input-focus-ring:      transparent;
  --input-placeholder:     rgba(226, 232, 240, 0.58);
  --input-text:            var(--text);
  --input-readonly-bg:     rgba(7, 12, 24, 0.58);
  --input-readonly-border: rgba(255, 255, 255, 0);

  /* ── Icon-link tokens ─────────────────────────────────────── */
  --icon-link-text:                  #ffffff;
  --icon-link-text-hover:            #e2e8f0;
  --icon-link-text-danger:           #fca5a5;
  --icon-link-text-danger-hover:     #f87171;
  --icon-link-disabled-opacity:      0.45;
  --icon-link-icon-bg:               transparent;
  --icon-link-icon-bg-hover:         transparent;
  --icon-link-icon-border:           transparent;
  --icon-link-icon-border-hover:     transparent;
  --icon-link-icon-danger-border:    rgba(248, 113, 113, 0.45);

  /* ── Select chevron ───────────────────────────────────────── */
  --select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d8e2ff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --select-chevron-size: 10px 6px;
  --select-chevron-position: right 16px center;
}