/* ═══════════════════════════════════════════════════════════════
 * BRAND — io_flow (dark, obsidian + safety-orange)
 *
 * No-code Flow editor for microcontrollers. Same brand system as
 * innofuse_forge (near-black "obsidian" canvas, warm safety-orange
 * accent) — io_flow is the product this studio is building, and
 * inherits its visual identity rather than inventing a new one.
 *
 * io_flow is a tool shell (app), not a brochure — dark-only, no theme
 * toggle. The single `:root` block IS the brand theme.
 * ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* ── Brand scale (single source of truth for orange) ── */
  --brand-50: #7c2d12;
  --brand-100: #9a3412;
  --brand-500: #f97316;
  --brand-600: #ea580c;            /* safety-orange accent */
  --brand-700: #c2410c;            /* deeper orange — hover */
  --brand-900: #431407;
  --color-accent: var(--brand-600);
  --color-accent-hover: var(--brand-500);
  --safety-orange: var(--brand-600);

  /* ── Surfaces (dark) ── */
  --obsidian: #050505;
  --color-bg: #050505;
  --color_text_light: #e5e7eb;
  --color-text-secondary: #9ca3af;
  --panel-bg: #0f0f0f;
  --color-surface-card: #0f0f0f;
  --color-surface-input: #1a1a1a;
  --border-color: #262626;
  --text-muted: #a1a1aa;
  --hover-bg: rgba(255, 255, 255, 0.06);

  /* ── Semantic (status, kept distinct from brand accent) ── */
  --color-success: #25d366;
  --color-error: #dc2626;
  --color_error: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* ── Flow-wire language (Section 9.1 of the product spec): exec wires are
   * neutral/animated, data wires are color-coded by type — this convention
   * must stay visually distinct from the brand accent so a wire never reads
   * as "active UI chrome". Reused verbatim by the editor + palette icons. ── */
  --wire-exec: #d4d4d8;
  --wire-number: var(--color-info);
  --wire-boolean: var(--color-success);
  --wire-pin: var(--color-warning);

  /* ── Glow shadows (brand signature) ── */
  --box_shadow: 0 0 25px rgba(234, 88, 12, 0.10);
  --shadow_hover: 0 0 35px rgba(234, 88, 12, 0.18);
  --shadow-elevation-1: 0 0 20px rgba(234, 88, 12, 0.08);
  --shadow-elevation-2: 0 0 35px rgba(234, 88, 12, 0.15);
  --focus-ring: rgba(234, 88, 12, 0.30);

  /* ── FORGE COMPONENT TOKENS ──
   * Comps in use: forge-nav, forge-svg, forge-button, forge-toggle,
   * forge-popup, forge-toast, forge-loader (transitive in comp.js shell). */
  --forge-button-bg: var(--brand-700);
  --forge-button-hover-bg: var(--brand-500);
  --forge-button-text: #ffffff;
  --forge-button-hover-glow: 0 0 20px rgba(234, 88, 12, 0.3);

  --forge-toggle-checked-bg: var(--brand-600);
  --forge-toggle-slider-bg: var(--border-color);
  --forge-toggle-knob-bg: #ffffff;
  --forge-toggle-focus-ring: var(--focus-ring);
  --forge-toggle-width: 2.75rem;
  --forge-toggle-height: 1.5rem;

  --forge-popup-heading-bg: var(--panel-bg);
  --forge-popup-bg: var(--panel-bg);
  --forge-popup-accent: var(--brand-600);
  --forge-popup-text-light: var(--color_text_light);

  --color-toast-bg: #0f0f0f;
  --color-toast-text: #e5e7eb;
  --color-toast-border: #262626;
  --color-toast-info: #3b82f6;
  --color-toast-success: #25d366;
  --color-toast-error: #dc2626;
  --color-toast-warning: #f59e0b;

  --forge-loader-color: var(--brand-600);
  --forge-loader-track: var(--border-color);
  --forge-loader-text: var(--text-muted);

  /* forge-menu — mobile bottom tab bar (transitively pulled in by forge-nav) */
  --color_menu_background: var(--panel-bg);
  --color_menu_btn: var(--brand-600);

  /* forge-form / forge-input — read with NO fallback on real DOM (used by
     the login/signup forms and flow-manager's name field). */
  --color_primary: var(--brand-600);
  --form_input_background_color: rgba(20, 20, 20, 0.6);
  --form_input_border_color: var(--border-color);
  --form_input_color: var(--color_text_light);
  --form_input_readonly_color: var(--text-muted);
  --form_label_color: var(--text-muted);

  /* forge-auth tokens — io_flow has no login yet, but the shell
   * transitively includes the auth comps; define them so a stray auth
   * page renders brand-dark instead of broken if the guard ever fires. */
  --forge-auth-canvas-bg: var(--obsidian);
  --forge-auth-card-bg: var(--panel-bg);
  --forge-auth-card-border: var(--border-color);
  --forge-auth-title-color: var(--color_text_light);
  --forge-auth-label-color: var(--text-muted);
  --forge-auth-error-color: var(--color-error);
  --forge-auth-link-color: var(--brand-600);
  --forge-auth-input-bg: rgba(20, 20, 20, 0.6);
  --forge-auth-input-border: var(--border-color);
  --forge-auth-input-text: var(--color_text_light);
  --forge-auth-link-hover-opacity: 0.8;

  /* ── SCALE PRIMITIVES ── */
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-popover: 400;
  --z-tooltip: 500;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* TYPE SCALE */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── Base reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Shell layout ── */
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ── Body / typography / background ── */
body,
html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.05vw, 16px);
  scroll-behavior: smooth;
  background-color: var(--obsidian);
  color: var(--color_text_light);
  overflow: hidden;
}

/* Subtle brand glow orb — fixed behind content. */
body::after {
  content: "";
  position: fixed;
  top: -10%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(234, 88, 12, 0.05) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 0.375rem; height: 0.375rem; background-color: var(--obsidian); }
::-webkit-scrollbar-thumb { background-color: #333; border-radius: 0.25rem; }
::-webkit-scrollbar-thumb:hover { background: var(--safety-orange); }

::selection { background: var(--safety-orange); color: var(--color_text_light); }

.font-mono { font-family: var(--font-mono); }

/* ── Page scroll-container (one canonical rule for every tab page that
   ISN'T the editor — the editor owns its own full-bleed layout) ── */
.library_main, .learn_main {
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  width: 100%;
  max-width: 100rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
@media only screen and (orientation: portrait) {
  .library_main, .learn_main { padding: 1rem; gap: 1.25rem; }
}

.library_main h1, .learn_main h1 {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color_text_light);
}
.library_main .G_subtitle, .learn_main .G_subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ── G_ atoms — global by convention: the C_ rewriter only targets the
   literal "C_" substring, so G_* classes pass through untouched (one
   definition, its own stable served name, reused across any component) ── */
.G_badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  white-space: nowrap;
}
.G_badge--open { color: var(--color-success); border-color: rgba(37, 211, 102, 0.4); }
.G_badge--locked { color: var(--brand-500); border-color: rgba(234, 88, 12, 0.4); }

.G_card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-8);
  background: rgba(20, 20, 20, 0.4);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.G_card:hover {
  border-color: rgba(234, 88, 12, 0.3);
  box-shadow: var(--shadow-elevation-1);
}

/* Forge comps default to neutral grey (2026-10-06) — pin this app's brand on them. */
:root {
  --forge-popup-heading-text: var(--forge-button-text, #fff);
  --forge-option-selected-bg: var(--brand-600);
  --forge-option-selected-text: var(--forge-button-text, #fff);
  --forge-date-calendar-selected-bg: var(--brand-600);
  --forge-date-calendar-selected-text: var(--forge-button-text, #fff);
}