/* Helm Design Tokens — Kavalsia obsidian / mint / green.
   One source of truth for color, space, type, radius, motion.
   Spacing is an 8pt scale; every module uses --gap so padding/gaps stay equal everywhere. */
:root {
  /* surfaces (obsidian) */
  --bg:        #07090b;
  --bg-1:      #0b0f12;   /* app frame */
  --bg-2:      #11161b;   /* panels / sidebars */
  --bg-3:      #161d23;   /* cards */
  --bg-4:      #1d262e;   /* hover / raised */
  --line:      #232c34;   /* hairline borders */
  --line-2:    #2c3742;

  /* ink */
  --ink:       #e9f1ee;   /* primary text */
  --ink-2:     #9fb0ad;   /* secondary */
  --ink-3:     #67787a;   /* muted / captions */

  /* brand */
  --green:     #22c55e;   /* Kavalsia green */
  --green-700: #16a34a;
  --mint:      #5eead4;   /* mint accent */
  --mint-2:    #2dd4bf;
  --gold:      #f5c451;   /* highlight */
  --danger:    #f87171;
  --info:      #60a5fa;

  /* accent is industry-driven; defaults to green, overridden by [data-industry] */
  --accent:    var(--green);
  --accent-2:  var(--mint);
  --accent-soft: rgba(34,197,94,.14);
  --glow:      rgba(34,197,94,.35);

  /* spacing scale (8pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gap: var(--s4);            /* the canonical gap/padding unit — use everywhere */
  --gap-lg: var(--s5);

  /* radius */
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 22px; --r-pill: 999px;

  /* type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --t-xs: 11px; --t-sm: 13px; --t-base: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px; --t-2xl: 38px;
  --lh: 1.5;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 18px 50px rgba(0,0,0,.55);

  /* layout rails */
  --nav-w: 248px;          /* left sidebar */
  --rail-w: 320px;         /* right context sidebar */
  --top-h: 52px;           /* tiny top bar */

  /* motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --fast: .14s; --med: .24s; --slow: .4s;
}

/* Industry accents — selecting an industry re-skins the whole OS via --accent. */
[data-industry="ecom"]    { --accent: #22c55e; --accent-2: #5eead4; --accent-soft: rgba(34,197,94,.14);  --glow: rgba(34,197,94,.35); }
[data-industry="saas"]    { --accent: #60a5fa; --accent-2: #818cf8; --accent-soft: rgba(96,165,250,.14); --glow: rgba(96,165,250,.35); }
[data-industry="app"]     { --accent: #c084fc; --accent-2: #f0abfc; --accent-soft: rgba(192,132,252,.14); --glow: rgba(192,132,252,.35); }
[data-industry="course"]  { --accent: #f5c451; --accent-2: #fbbf24; --accent-soft: rgba(245,196,81,.14);  --glow: rgba(245,196,81,.35); }

/* icon safety net: every icon() svg is text-sized by default; flex never stretches it.
   Specific contexts (.btn svg, .glyph svg, .nav .item svg) override in app.css. */
svg.hicon { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: middle; }
/* round glyph wrappers scale their icon via font-size (works even for inline-styled ones) */
.glyph { font-size: 18px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: #3a4753; }