/* ============================================================
   TimlX Theme — design tokens (variables.css)
   Loaded site-wide BEFORE theme.css (manifest includefiles order matters)
   AND linked directly by the marketing chrome (_doc-top.tpl).

   TWO concerns live here:
   1. --tlx-* marketing tokens (used by theme.css fallbacks).
   2. The full SE v8 --theme-* contract. The compiled module bundles
      (externals/styles/styles*.css) carry thousands of var(--theme-…)
      declarations; if the ACTIVE theme doesn't define them, SE community
      pages render structurally unstyled (no column widths, no card colors).
      Defined here and skinned to the TimlX dark palette so community/login
      pages match the marketing chrome. (Contract mirrors the Pulse/
      flyakiteday token set; only colors were re-skinned dark.)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* ---- TimlX brand palette (dark) ---- */
  --tlx-deep:      #080D18;   /* page background */
  --tlx-surface:   #0D1635;   /* cards / boxes / inputs */
  --tlx-surface-2: #111B3E;   /* hover / alt surface */
  --tlx-surface-3: #0A1020;   /* alternating rows */
  --tlx-ink:       #F7F9FC;   /* headlines */
  --tlx-body:      #EEF1F6;   /* body text */
  --tlx-muted:     #AEB6C4;   /* secondary text */
  --tlx-dim:       #7E8798;   /* tertiary text */
  --tlx-line:      rgba(255,255,255,.12);
  --tlx-line-soft: rgba(255,255,255,.08);
  --tlx-violet:    #8B7CF6;
  --tlx-violet-l:  #A99CF9;
  --tlx-violet-d:  #7A6AF0;
  --tlx-gold:      #F0B429;
  --tlx-blue:      #63B3ED;

  /* ---- --tlx-* tokens used by theme.css (kept for fallbacks) ---- */
  --tlx-bg-deep: #080D18;
  --tlx-bg-mid: #0D1635;
  --tlx-bg-form: #0A0F1E;
  --tlx-bg-card-dark: #0A1020;
  --tlx-text-primary: #F7F9FC;
  --tlx-text-body: #EEF1F6;
  --tlx-text-muted: #AEB6C4;
  --tlx-text-dim: #7E8798;
  --tlx-text-faint: #5a6070;
  --tlx-text-ghost: #4a5268;
  --tlx-border-subtle: rgba(255,255,255,.07);
  --tlx-border-light: rgba(255,255,255,.08);
  --tlx-border-card: rgba(255,255,255,.14);
  --tlx-border-divider: #2e3848;
  --tlx-violet-light: #B9B0F5;
  --tlx-green: #72E8A0;
  --tlx-font-display: 'Space Grotesk', sans-serif;
  --tlx-font-body: 'IBM Plex Sans', sans-serif;
  --tlx-section-pad-h: 56px;

  /* Type families */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Compat aliases for the ported SE-page skin (mini menu etc.),
          mapped onto the TimlX dark palette. ---- */
  --navy: #0D1635;          /* dark chrome bar surface */
  --navy-700: #111B3E;
  --blue: #8B7CF6;          /* accent → violet */
  --blue-600: #7A6AF0;
  --paper: #080D18;
  --paper-2: #0A1020;
  --card: #0D1635;          /* dropdown / card surface */
  --ink: #EEF1F6;           /* primary text (light on dark) */
  --ink-soft: #AEB6C4;
  --line: rgba(255,255,255,.12);
  --line-dk: rgba(255,255,255,.10);
  --cream-dk: #EEF1F6;
  --cream-soft: #AEB6C4;
  --charcoal: #080D18;
  --gutter: clamp(20px, 5vw, 56px);

  /* Radii + shadow (structural — kept from the working contract) */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --radius: var(--r-md);
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 14px 34px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px -28px rgba(0,0,0,.7);
  --shadow: var(--shadow-sm);
  --maxw: 1200px;
}

/* ============================================================
   SE v8 theme tokens (--theme-*) — TimlX dark mapping.
   Variable NAMES + structural values match the working contract;
   color values re-skinned onto the TimlX dark palette above.
   ============================================================ */
:root {
  /* Page widths & canvas (STRUCTURAL — do not change: drives SE column layout) */
  --theme-main-width: 1300px;
  --theme-content-width: 1300px;
  --theme-content-columns-left-width: 260px;
  --theme-content-columns-right-width: 300px;
  --theme-body-background-color: var(--tlx-deep);
  --theme-color: var(--tlx-violet);

  /* Header / footer (SE-rendered fallbacks; the TimlX chrome widgets sit on top) */
  --theme-header-background-color: var(--tlx-deep);
  --theme-header-menu-background-color: var(--tlx-deep);
  --theme-header-menu-link-background-color: transparent;
  --theme-header-menu-link-background-color-hover: rgba(255,255,255,.08);
  --theme-header-menu-link-color: var(--tlx-muted);
  --theme-header-menu-link-hover-color: #ffffff;
  --theme-header-menu-link-size: 0.875rem;
  --theme-header-menu-link-decoration: none;
  --theme-header-menu-link-hover-decoration: none;
  --theme-header-menu-font-family: var(--body);
  --theme-topbar-background-color: var(--tlx-deep);
  --theme-mainmenu-links-color: var(--tlx-muted);
  --theme-footer-background-color: var(--tlx-deep);
  --theme-footer-font-color: var(--tlx-dim);
  --theme-footer-link-color: var(--tlx-muted);
  --theme-footer-border-color: var(--tlx-line-soft);

  /* Text & links */
  --theme-font-color: var(--tlx-body);
  --theme-font-color-light: var(--tlx-muted);
  --theme-link-color: var(--tlx-violet);
  --theme-link-color-hover: var(--tlx-violet-l);
  --theme-link-hover-color: var(--tlx-violet-l);
  --theme-headline-color: var(--tlx-ink);
  --theme-border-color: var(--tlx-line);

  /* Inputs & buttons */
  --theme-input-background-color: var(--tlx-surface);
  --theme-input-font-color: var(--tlx-body);
  --theme-input-border-colors: var(--tlx-line);
  --theme-input-border-color: var(--tlx-line);
  --theme-input-radius: var(--radius-sm);
  --theme-button-background-color: var(--tlx-violet);
  --theme-button-background-color-hover: var(--tlx-violet-d);
  --theme-button-font-color: #080D18;
  --theme-button-font-color-hover: #080D18;
  --theme-button-border-color: var(--tlx-violet);
  --theme-button-border-color-hover: var(--tlx-violet-d);
  --theme-button-fontsize: 0.9375rem;
  --theme-secondary-button-background-color: rgba(255,255,255,.08);
  --theme-secondary-button-background-color-hover: rgba(255,255,255,.14);
  --theme-secondary-button-font-color: var(--tlx-body);
  --theme-secondary-button-font-color-hover: #ffffff;
  --theme-secondary-button-border-color: var(--tlx-line);
  --theme-secondary-button-border-color-hover: var(--tlx-line);

  /* Tabs (button-style, browse pages) */
  --theme-buttontabs-font-color: var(--tlx-muted);
  --theme-buttontabs-font-color-hover: var(--tlx-violet);
  --theme-buttontabs-font-color-active: var(--tlx-violet);
  --theme-buttontabs-border-color: transparent;
  --theme-buttontabs-border-color-active: var(--tlx-violet);
  --theme-buttontabs-font-family: var(--body);
  --theme-buttontabs-font-size: 0.875rem;

  /* Tabs (profile & section tabs) */
  --theme-tabs-background-color: var(--tlx-surface);
  --theme-tabs-background-color-active: var(--tlx-violet);
  --theme-tabs-font-color: var(--tlx-muted);
  --theme-tabs-font-color-active: #080D18;
  --theme-tabs-border-color: transparent;
  --theme-tabs-border-color-hover: var(--tlx-violet);
  --theme-tabs-border-color-active: var(--tlx-violet);
  --theme-tabs-font-size: 0.875rem;
  --theme-tabs-font-family: var(--body);

  /* Lists / boxes */
  --theme-list-background-color: var(--tlx-surface);
  --theme-list-background-color-alt: var(--tlx-surface-3);
  --theme-list-background-color-hover: rgba(139,124,246,.10);
  --theme-comments-background-color: var(--tlx-surface);
  --theme-box-background-color: var(--tlx-surface);
  --theme-foreground-background-color: var(--tlx-surface);

  /* Tags */
  --theme-tag-background-color: rgba(255,255,255,.08);
  --theme-tag-font-color: var(--tlx-body);

  /* Inline pulldown menus */
  --theme-pulldown-background-color: var(--tlx-surface);
  --theme-pulldown-background-color-hover: rgba(139,124,246,.12);
  --theme-pulldown-background-color-active: rgba(139,124,246,.18);
  --theme-pulldown-font-color-active: var(--tlx-violet-l);
  --theme-pulldown-border-color: var(--tlx-line);
  --theme-pulldown-contents-background-color: var(--tlx-surface);
  --theme-pulldown-contents-list-background-color-hover: rgba(139,124,246,.12);
  --theme-pulldown-contents-list-background-color-active: rgba(139,124,246,.18);
  --theme-pulldown-contents-list-font-color-active: var(--tlx-body);

  /* Type scale */
  --theme-font-family: var(--body);
  --theme-heading-font-family: var(--display);
  --theme-font-size: 0.9375rem;
  --theme-font-size-small: 0.8125rem;
  --theme-headline-size-large: 1.45rem;
  --theme-headline-size-medium: 1.08rem;
  --theme-title-size: var(--theme-font-size);
  --theme-menu-link-size: 0.875rem;
  --theme-font-weight-bold: 600;

  /* Spacing, radii, shadows */
  --theme-item-spacing: 0.625rem;
  --theme-item-radius: var(--radius-sm);
  --theme-item-transition: all .2s ease-in-out;
  --theme-item-shadow: var(--shadow-sm);
  --theme-item-shadow-hover: var(--shadow-md);
  --theme-widget-spacing: 1.25rem;
  --theme-widget-radius: var(--r-md);
  --theme-layout-box-shadow: var(--shadow-sm);
}