/* ═══════════════════════════════════════════════════════════════════
   WELI BRAND THEME — research.weli.ai
   Maps the Weli Design System v2.0 tokens onto the existing app
   variables in static/style.css.

   HOW IT WORKS
   This file only *reassigns CSS custom properties* that style.css
   already consumes. It defines no new layout, changes no markup, and
   touches no application logic. It must load AFTER style.css.

   TO DISABLE
   Remove the single <link> to this file in templates/base.html.
   Everything reverts to the previous appearance exactly.

   SOURCE TOKENS (Weli Design System v2.0, May 2026)
     ink #0A0E1A · paper #FAFAF7 · signal #FF5A1F
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Inter (brand typeface, self-hosted) ─────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
}

/* ═══════════════════════════════════════════════════════════════════
   1. RAW BRAND TOKENS
   Available everywhere as --w-* for any future hand-written CSS.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Core (locked by brand) */
  --w-ink:    #0A0E1A;
  --w-paper:  #FAFAF7;
  --w-signal: #FF5A1F;

  /* Signal scale */
  --w-signal-deep: #C43B0D;
  --w-signal-mid:  #FF7E4D;
  --w-signal-pale: #FFE4D6;

  /* Ink scale */
  --w-ink-700:  #14202E;
  --w-ink-500:  #243346;
  --w-ink-300:  #7A8EA8;
  --w-ink-50:   #E6EAF0;
  --w-ink-deep: #1A0A04;

  /* Text on dark */
  --w-text-d-primary: #FFFFFF;
  --w-text-d-body:    rgba(250, 250, 247, 0.92);
  --w-text-d-muted:   rgba(250, 250, 247, 0.70);
  --w-text-d-meta:    rgba(250, 250, 247, 0.55);

  /* Text on light */
  --w-text-l-primary: #0A0E1A;
  --w-text-l-body:    rgba(10, 14, 26, 0.92);
  --w-text-l-muted:   rgba(10, 14, 26, 0.65);
  --w-text-l-meta:    rgba(10, 14, 26, 0.55);

  /* Borders */
  --w-border-d:      rgba(250, 250, 247, 0.18);
  --w-border-d-soft: rgba(250, 250, 247, 0.09);
  --w-border-l:      rgba(10, 14, 26, 0.18);
  --w-border-l-soft: rgba(10, 14, 26, 0.10);
  --w-border-signal: rgba(255, 90, 31, 0.22);

  /* Data palette — for charts, states and status colours */
  --w-data-blueprint: #2E6FD4;
  --w-data-meridian:  #0D9B82;
  --w-data-amber:     #D9850D;
  --w-data-slate:     #5A7090;

  /* Type + radius + motion */
  --w-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --w-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --w-r-sm: 6px;
  --w-r-md: 10px;
  --w-r-lg: 16px;
  --w-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --w-dur-fast: 160ms;
  --w-dur-std:  240ms;
}

/* ═══════════════════════════════════════════════════════════════════
   2. DARK THEME  (app default :root palette)
   Weli "Base" surface — ink ground, elevated panels, signal accent.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg:        var(--w-ink);
  --panel:     var(--w-ink-700);
  --panel-alt: #1B2A3C;
  --text:      var(--w-text-d-body);
  --muted:     var(--w-text-d-muted);
  --border:    var(--w-border-d-soft);

  /* Brand accents — Signal replaces the old blue */
  --brand:           var(--w-signal);
  --brand-primary:   var(--w-signal);
  --brand-secondary: var(--w-signal-deep);
  --brand-accent:    var(--w-signal-mid);
  --brand-success:   var(--w-data-meridian);
  --brand-warn:      var(--w-data-amber);
  --brand-error:     #E5484D;

  --brand-text-primary:   var(--w-text-d-primary);
  --brand-text-secondary: var(--w-text-d-muted);
  --brand-surface:        var(--w-ink-700);
  --brand-surface-alt:    #1B2A3C;
  --brand-border:         var(--w-border-d-soft);

  --link: var(--w-signal-mid);

  --code-bg: #0D1723;
  --shadow:       0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
  --mobile-divider: var(--w-border-d-soft);

  --radius-lg: var(--w-r-lg);
  --radius-md: var(--w-r-md);
  --radius-sm: var(--w-r-sm);

  --mono: var(--w-mono);
  --assistant-radius: var(--w-r-md);
  --assistant-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --surface-soft: #162434;

  /* These three are referenced by style.css but were never defined
     anywhere (pre-existing gap) — supplying brand values fixes silently
     broken colours in status text and hints. */
  --ok:         var(--w-data-meridian);
  --error:      #E5484D;
  --text-muted: var(--w-text-d-meta);
}

/* ═══════════════════════════════════════════════════════════════════
   3. LIGHT THEME  (.light-mode — the app's default on first visit)
   Weli "Paper" surface — warm off-white ground, ink text.
   ═══════════════════════════════════════════════════════════════════ */
.light-mode {
  --bg:        var(--w-paper);
  --panel:     #FFFFFF;
  --panel-alt: #F2F1EC;
  --text:      var(--w-text-l-primary);
  --muted:     var(--w-text-l-muted);
  --border:    var(--w-border-l-soft);

  --brand:           var(--w-signal-deep);
  --brand-primary:   var(--w-signal-deep);  /* deep variant: AA contrast on paper */
  --brand-secondary: #A63109;
  --brand-accent:    var(--w-signal);
  --brand-success:   #0B7A66;
  --brand-warn:      #B06A05;
  --brand-error:     #C4262B;

  --brand-text-primary:   var(--w-text-l-primary);
  --brand-text-secondary: var(--w-text-l-body);
  --brand-surface:        #FFFFFF;
  --brand-surface-alt:    #F2F1EC;
  --brand-border:         var(--w-border-l-soft);

  --link: var(--w-signal-deep);

  --code-bg: #F2F1EC;
  --shadow:       0 6px 18px rgba(10, 14, 26, 0.06);
  --shadow-hover: 0 12px 32px rgba(10, 14, 26, 0.10);
  --mobile-divider: var(--w-border-l-soft);
  --surface-soft: #F2F1EC;

  --ok:         #0B7A66;
  --error:      #C4262B;
  --text-muted: var(--w-text-l-meta);
}

/* ═══════════════════════════════════════════════════════════════════
   4. TYPOGRAPHY
   Inter everywhere (the app already asked for it); brand mono for
   code and numeric/meta contexts.
   ═══════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--w-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--w-sans);
  letter-spacing: -0.025em;
  font-weight: 500;
}
h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.030em; }

code, pre, kbd, samp, .mono {
  font-family: var(--w-mono);
}

/* ═══════════════════════════════════════════════════════════════════
   5. BRAND FINISH
   Small, surgical touches that carry the identity. Purely cosmetic —
   each one can be deleted without side effects.
   ═══════════════════════════════════════════════════════════════════ */

/* Signal focus ring — replaces the default blue outline */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--w-signal);
  outline-offset: 2px;
  border-radius: var(--w-r-sm);
}

/* Text selection */
::selection {
  background: var(--w-signal);
  color: var(--w-ink-deep);
}

/* Brand-consistent scrollbars (WebKit) */
* {
  scrollbar-color: var(--w-ink-300) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--w-ink-500);
  border-radius: var(--w-r-full, 9999px);
  border: 2px solid transparent;
  background-clip: content-box;
}
.light-mode ::-webkit-scrollbar-thumb { background: #C9CDD6; background-clip: content-box; }

/* Primary buttons: Signal fill with ink-deep text, per brand spec */
.btn.primary,
button.primary,
.btn-primary,
input[type="submit"] {
  background: var(--w-signal);
  border-color: var(--w-signal);
  color: var(--w-ink-deep);
  font-weight: 500;
  transition: background var(--w-dur-fast) var(--w-ease-smooth),
              transform var(--w-dur-fast) var(--w-ease-smooth);
}
.btn.primary:hover,
button.primary:hover,
.btn-primary:hover,
input[type="submit"]:hover {
  background: var(--w-signal-mid);
  border-color: var(--w-signal-mid);
  color: var(--w-ink-deep);
}

/* ─── Header wordmark lockup: "weli." + research ─────────────────── */
.brand-text { display: flex; align-items: baseline; gap: 7px; line-height: 1; }
.weli-wordmark {
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.weli-sub {
  font-family: var(--w-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The wordmark dot is always Signal */
.brand-dot,
.w-mark .dot { color: var(--w-signal); }

/* Keep the square mark tidy at header size */
.logo { border-radius: var(--w-r-sm); overflow: hidden; }

/* Dot-grid + focal wash on the public hero, per v2 hero pattern.
   Scoped to public pages only — never the workspace or admin. */
body.surface-public .hero,
body.surface-public .site-hero,
body.surface-public .hero-section {
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 90, 31, 0.10) 0%, rgba(255, 90, 31, 0) 70%),
    url('images/brand/grid.svg');
  background-repeat: no-repeat, repeat;
  background-size: auto, 32px 32px;
}

/* ═══════════════════════════════════════════════════════════════════
   6. LEGACY BLUE OVERRIDES
   style.css hard-codes the old brand blue (#0B5FA5) and blue-green
   (#0B7A75) in ten places that bypass the variable layer. These would
   otherwise remain visibly "old" against the Weli palette. Overridden
   here by selector so style.css itself stays untouched.
   ═══════════════════════════════════════════════════════════════════ */
.light-mode .footer-links a:focus-visible,
.cta-section .btn.cta,
.cta-section .btn.cta:hover,
.sim-progress-stage-chip.is-active {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.banner,
.cta-section {
  background: linear-gradient(135deg, var(--w-ink) 0%, var(--w-ink-700) 60%, #2A1409 100%);
}

.sim-status-progress-fill {
  background: linear-gradient(90deg, var(--w-signal) 0%, var(--w-signal-mid) 100%);
}

.sim-workflow-list li.is-current,
.sim-workflow-list li.is-current::before {
  background: var(--w-signal);
  color: var(--w-ink-deep);
}

/* Chat bubbles: user = Signal rail, assistant = neutral rail */
#chat-messages .chat-msg.user     { border-left-color: var(--w-signal); }
#chat-messages .chat-msg.assistant{ border-left-color: var(--w-ink-300); }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}