/* Thundera Shell v2 — design tokens.
 * One source of truth for every Thundera surface. Guide: https://thundera.eu/docs/shell
 *
 *   <html data-brand="whisper" data-th-theme="dark|light|auto" class="th">
 *
 * data-brand     per-app preset generated from <app>/brand/tokens.json (never write brand literals)
 * data-th-theme  dark (default) | light | auto (follows the OS). Nestable: a section can force one.
 * class="th"     opt-in base styles (body font, colours, links) for pages built fully on the kit.
 */

/* ── Static tokens (theme-independent) ───────────────────────────────── */
:root {
  /* Group identity: Thundera orange. Auth and thundera.eu keep it for every app. */
  --th-group-1: #f97316;
  --th-group-2: #f5b041;
  --th-group-grad: linear-gradient(135deg, var(--th-group-1), var(--th-group-2));

  /* Default brand = group; [data-brand] presets below override. */
  --brand-1: #f97316; --brand-2: #f5b041; --brand-3: #f5b041;
  --brand-ad: #f97316; --brand-al: #c2410c; --brand-od: #0b0d12; --brand-ol: #ffffff;

  /* Typography */
  --th-font-sans: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --th-font-display: var(--th-font-sans);
  --th-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --th-fs-2xs: .6875rem;
  --th-fs-xs: .75rem;
  --th-fs-sm: .875rem;
  --th-fs-base: 1rem;
  --th-fs-md: 1.0625rem;
  --th-fs-lg: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  --th-fs-xl: clamp(1.25rem, 1.13rem + .55vw, 1.5rem);
  --th-fs-2xl: clamp(1.5rem, 1.3rem + .9vw, 1.875rem);
  --th-fs-3xl: clamp(1.875rem, 1.45rem + 1.9vw, 2.625rem);
  --th-fs-4xl: clamp(2.25rem, 1.55rem + 3.1vw, 3.625rem);
  --th-fs-5xl: clamp(2.625rem, 1.6rem + 4.6vw, 4.75rem);
  --th-fw-regular: 400; --th-fw-medium: 500; --th-fw-semibold: 600; --th-fw-bold: 700; --th-fw-black: 800;
  --th-lh-tight: 1.08; --th-lh-snug: 1.3; --th-lh-normal: 1.55; --th-lh-relaxed: 1.7;
  --th-tracking-display: -.035em; --th-tracking-tight: -.02em; --th-tracking-wide: .08em;

  /* Spacing (4px base) */
  --th-space-0: 0; --th-space-px: 1px; --th-space-0-5: 2px; --th-space-1: 4px; --th-space-1-5: 6px;
  --th-space-2: 8px; --th-space-3: 12px; --th-space-4: 16px; --th-space-5: 20px; --th-space-6: 24px;
  --th-space-8: 32px; --th-space-10: 40px; --th-space-12: 48px; --th-space-16: 64px; --th-space-20: 80px;
  --th-space-24: 96px; --th-space-32: 128px;
  --th-section-y: clamp(64px, 9vw, 128px);
  --th-gutter: clamp(16px, 4vw, 32px);

  /* Layout */
  --th-container: 1200px; --th-container-wide: 1360px; --th-container-narrow: 760px;
  --th-bar-h: 60px;
  --th-sidebar-w: 248px; --th-sidebar-w-collapsed: 64px;
  /* Breakpoints (reference only: custom properties cannot drive @media).
     sm 640 · md 900 (shell switches to the mobile bar below this) · lg 1200 · xl 1440 */
  --th-bp-sm: 640px; --th-bp-md: 900px; --th-bp-lg: 1200px; --th-bp-xl: 1440px;

  /* Radii */
  --th-radius-xs: 4px; --th-radius-sm: 8px; --th-radius-md: 12px; --th-radius-lg: 16px;
  --th-radius-xl: 22px; --th-radius-2xl: 28px; --th-radius-full: 999px;

  /* Motion */
  --th-ease: cubic-bezier(.2, .8, .2, 1);
  --th-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --th-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --th-dur-1: 120ms; --th-dur-2: 200ms; --th-dur-3: 320ms; --th-dur-4: 560ms; --th-dur-5: 900ms;

  /* Layers */
  --th-z-raised: 10; --th-z-dropdown: 1000; --th-z-sticky: 1100; --th-z-bar: 1200;
  --th-z-popover: 1300; --th-z-drawer: 1400; --th-z-modal: 1500; --th-z-toast: 1600;

  /* Semantic hues (raw). Use the themed *-text / *-soft tokens for UI. */
  --th-green: #22c55e; --th-amber: #f59e0b; --th-red: #ef4444; --th-sky: #38bdf8; --th-violet: #a78bfa;
}
@media (max-width: 899.98px) { :root { --th-bar-h: 56px; } }

/* ── Dark theme (default) ────────────────────────────────────────────── */
:root, [data-th-theme="dark"] {
  color-scheme: dark;
  --th-bg: #06080d;
  --th-bg-2: #0a0d14;
  --th-surface-1: #0e1219;
  --th-surface-2: #151a25;
  --th-surface-3: #1d2333;
  --th-surface-4: #283044;
  --th-glass: rgba(9, 12, 18, .72);
  --th-overlay: rgba(2, 4, 8, .66);
  --th-text: #f4f6f9;
  --th-text-2: #a6b0be;
  --th-text-3: #808a99;
  --th-text-inverse: #0b0d12;
  --th-border: rgba(255, 255, 255, .07);
  --th-border-2: rgba(255, 255, 255, .12);
  --th-border-3: rgba(255, 255, 255, .2);
  --th-hover: rgba(255, 255, 255, .05);
  --th-active: rgba(255, 255, 255, .09);
  --th-success-text: #4ade80; --th-warning-text: #fbbf24; --th-danger-text: #f87171; --th-info-text: #7dd3fc;
  --th-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --th-shadow-2: 0 2px 4px rgba(0, 0, 0, .28), 0 8px 20px rgba(0, 0, 0, .28);
  --th-shadow-3: 0 4px 10px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .42);
  --th-shadow-4: 0 10px 24px rgba(0, 0, 0, .36), 0 36px 90px rgba(0, 0, 0, .55);
  --th-code-bg: #0a0d13;
}

/* ── Light theme ─────────────────────────────────────────────────────── */
[data-th-theme="light"] {
  color-scheme: light;
  --th-bg: #f6f7f9;
  --th-bg-2: #eef0f4;
  --th-surface-1: #ffffff;
  --th-surface-2: #f3f4f7;
  --th-surface-3: #e8eaf0;
  --th-surface-4: #d8dce5;
  --th-glass: rgba(255, 255, 255, .78);
  --th-overlay: rgba(15, 18, 26, .42);
  --th-text: #0d1117;
  --th-text-2: #4a5361;
  --th-text-3: #646d7b;
  --th-text-inverse: #ffffff;
  --th-border: rgba(13, 17, 23, .08);
  --th-border-2: rgba(13, 17, 23, .14);
  --th-border-3: rgba(13, 17, 23, .24);
  --th-hover: rgba(13, 17, 23, .04);
  --th-active: rgba(13, 17, 23, .08);
  --th-success-text: #15803d; --th-warning-text: #a16207; --th-danger-text: #dc2626; --th-info-text: #0369a1;
  --th-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --th-shadow-2: 0 1px 3px rgba(16, 24, 40, .08), 0 6px 16px rgba(16, 24, 40, .06);
  --th-shadow-3: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 36px rgba(16, 24, 40, .1);
  --th-shadow-4: 0 8px 16px rgba(16, 24, 40, .08), 0 32px 72px rgba(16, 24, 40, .16);
  --th-code-bg: #0f131b;
}
@media (prefers-color-scheme: light) {
  [data-th-theme="auto"] {
    color-scheme: light;
    --th-bg: #f6f7f9; --th-bg-2: #eef0f4;
    --th-surface-1: #ffffff; --th-surface-2: #f3f4f7; --th-surface-3: #e8eaf0; --th-surface-4: #d8dce5;
    --th-glass: rgba(255, 255, 255, .78); --th-overlay: rgba(15, 18, 26, .42);
    --th-text: #0d1117; --th-text-2: #4a5361; --th-text-3: #646d7b; --th-text-inverse: #ffffff;
    --th-border: rgba(13, 17, 23, .08); --th-border-2: rgba(13, 17, 23, .14); --th-border-3: rgba(13, 17, 23, .24);
    --th-hover: rgba(13, 17, 23, .04); --th-active: rgba(13, 17, 23, .08);
    --th-success-text: #15803d; --th-warning-text: #a16207; --th-danger-text: #dc2626; --th-info-text: #0369a1;
    --th-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
    --th-shadow-2: 0 1px 3px rgba(16, 24, 40, .08), 0 6px 16px rgba(16, 24, 40, .06);
    --th-shadow-3: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 36px rgba(16, 24, 40, .1);
    --th-shadow-4: 0 8px 16px rgba(16, 24, 40, .08), 0 32px 72px rgba(16, 24, 40, .16);
    --th-code-bg: #0f131b;
  }
}

/* ── Per-app brand presets ───────────────────────────────────────────── */
/* @generated brands:start — scripts/shell-brands.py, do not edit by hand */
[data-brand="thundera"],[data-brand="auth"],[data-brand="portal"]{--brand-1:#f97316;--brand-2:#f5b041;--brand-3:#f5b041;--brand-ad:#f97316;--brand-al:#bd5711;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="ai"]{--brand-1:#9b7cff;--brand-2:#43d9e8;--brand-3:#ff74c8;--brand-ad:#9b7cff;--brand-al:#7e64cf;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="aitrade"]{--brand-1:#4da3ff;--brand-2:#22c55e;--brand-3:#22c55e;--brand-ad:#4da3ff;--brand-al:#3979bd;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="eam"]{--brand-1:#4f46e5;--brand-2:#c084fc;--brand-3:#c084fc;--brand-ad:#a855f7;--brand-al:#9b4ee3;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="jarvis"]{--brand-1:#2563eb;--brand-2:#06b6d4;--brand-3:#06b6d4;--brand-ad:#4177ee;--brand-al:#1e40af;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="models"]{--brand-1:#059669;--brand-2:#84cc16;--brand-3:#84cc16;--brand-ad:#34d399;--brand-al:#047857;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="photomemory"]{--brand-1:#14b8a6;--brand-2:#38bdf8;--brand-3:#38bdf8;--brand-ad:#14b8a6;--brand-al:#0e8478;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="swarm"]{--brand-1:#f59e0b;--brand-2:#ef4444;--brand-3:#ef4444;--brand-ad:#f59e0b;--brand-al:#b26205;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="thundercode"]{--brand-1:#f06a4f;--brand-2:#f2b84b;--brand-3:#f2b84b;--brand-ad:#f58a63;--brand-al:#c84d36;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="vaultron"]{--brand-1:#22d3ee;--brand-2:#8b5cf6;--brand-3:#8b5cf6;--brand-ad:#22d3ee;--brand-al:#07819e;--brand-od:#0b0d12;--brand-ol:#ffffff}
[data-brand="whisper"]{--brand-1:#a855f7;--brand-2:#ec4899;--brand-3:#ec4899;--brand-ad:#a855f7;--brand-al:#9333ea;--brand-od:#0b0d12;--brand-ol:#ffffff}
/* @generated brands:end */

/* Brand-derived tokens. Declared on every [data-brand] element too, so a card
   can carry a sibling app's brand inside a page (thundera.eu product grid). */
:root, [data-brand] {
  --brand-accent: var(--brand-ad);
  --brand-on: var(--brand-od);
  --brand-grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --brand-grad-3: linear-gradient(120deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  --brand-soft: color-mix(in srgb, var(--brand-1) 14%, transparent);
  --brand-line: color-mix(in srgb, var(--brand-1) 38%, transparent);
  --brand-glow: 0 10px 40px color-mix(in srgb, var(--brand-1) 32%, transparent);
  --th-ring: 0 0 0 2px var(--th-bg), 0 0 0 4px var(--brand-accent);
}
[data-th-theme="light"], [data-th-theme="light"] [data-brand] { --brand-accent: var(--brand-al); --brand-on: var(--brand-ol); }
[data-th-theme="dark"] [data-brand] { --brand-accent: var(--brand-ad); --brand-on: var(--brand-od); }
@media (prefers-color-scheme: light) {
  [data-th-theme="auto"], [data-th-theme="auto"] [data-brand] { --brand-accent: var(--brand-al); --brand-on: var(--brand-ol); }
}

/* Semantic soft fills (theme-aware through color-mix on the raw hue). */
:root {
  --th-success-soft: color-mix(in srgb, var(--th-green) 14%, transparent);
  --th-warning-soft: color-mix(in srgb, var(--th-amber) 16%, transparent);
  --th-danger-soft: color-mix(in srgb, var(--th-red) 14%, transparent);
  --th-info-soft: color-mix(in srgb, var(--th-sky) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --th-dur-1: 1ms; --th-dur-2: 1ms; --th-dur-3: 1ms; --th-dur-4: 1ms; --th-dur-5: 1ms; }
}

/* ── Opt-in base (class="th" on <html>) ──────────────────────────────── */
:where(.th) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(.th) *, :where(.th) *::before, :where(.th) *::after { box-sizing: border-box; }
:where(.th) body {
  margin: 0; min-height: 100dvh; background: var(--th-bg); color: var(--th-text);
  font: var(--th-fw-regular) var(--th-fs-base)/var(--th-lh-normal) var(--th-font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
:where(.th) :is(h1, h2, h3, h4, h5, h6) { margin: 0; line-height: var(--th-lh-snug); letter-spacing: var(--th-tracking-tight); text-wrap: balance; }
:where(.th) p { margin: 0; text-wrap: pretty; }
:where(.th) a { color: var(--brand-accent); text-decoration: none; }
:where(.th) a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Links inside running text are underlined so they never rely on colour alone (WCAG 1.4.1). */
:where(.th) :is(p, li, dd, td, figcaption) > a:not([class]) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
:where(.th) img, :where(.th) svg, :where(.th) video { max-width: 100%; height: auto; }
:where(.th) code, :where(.th) kbd, :where(.th) pre, :where(.th) samp { font-family: var(--th-font-mono); font-size: .92em; }
:where(.th) :focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: var(--th-radius-xs); }
:where(.th) ::selection { background: color-mix(in srgb, var(--brand-1) 35%, transparent); }
:where(.th) [hidden] { display: none !important; }
.th-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }