/* =========================================================================
   ELEVATY CONTENT ENGINE — Design Tokens v0.2 (Lilac, M-LILAC.1)
   Source of truth for the tool UI. Every stylesheet references these vars.

   TWO LAYERS:
   - BRAND tokens  → overridable per tenant (Elevaty = tenant #1).
   - SYSTEM tokens → fixed across tenants (neutrals, semantics, spacing, type).

   The accepted Lilac identity (design-reference/lilac-workspace.html, 2026-09-20):
   #762BFF for actions and selection, white surfaces on a cool #F6F8FB canvas,
   #14243A primary text, #526277 supporting text, #DDE3EC dividers, Plus Jakarta
   Sans for interface AND headings (self-hosted, fonts.css). Neutral surfaces carry
   information; purple identifies actions and selection; status colours keep their
   meaning. The previous token file is frozen as tokens-classic.css for the
   UI_SHELL=classic rollback and is not a second source of truth.

   The ARTICLE body never reads these tokens: the rendered article is dressed by the
   plugin's own stylesheet (assets/article-output, /static/elv/…).
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     BRAND — TENANT-OVERRIDABLE
     --------------------------------------------------------------------- */

  /* Primary interactive violet — #762BFF (accepted Lilac accent). */
  --brand-50:  #F1EAFF;
  --brand-100: #E6D9FF;
  --brand-200: #D3BFFF;
  --brand-300: #B08AFF;
  --brand-500: #8A4DFF;
  --brand-600: #762BFF;   /* PRIMARY — links, focus, selection, filled actions (light) */
  --brand-700: #6320DF;   /* hover on filled actions, active nav text */
  --brand-900: #2E1268;

  /* The filled action is split from the link/focus colour so dark mode can keep a
     readable filled button (#8246D9 + white) while links lift to #BE9EFF. In light
     mode both are the primary. White on #762BFF measures 5.90:1. */
  --brand-fill:       var(--brand-600);
  --brand-fill-hover: #631AE4;
  /* Selected / active surfaces: a soft violet wash with a hairline of the same hue. */
  --brand-soft:        #EEE7FF;
  --brand-soft-border: #DFD0FF;
  --brand-text:        #6620DF;

  /* Ink — the "foundations" hue for dark surfaces. Blue-charcoal, never pure black. */
  --ink-900: #0F1B2E;
  --ink-800: #14243A;
  --ink-700: #22314A;

  /* Insight / authority accent — flat, sparse, MEANINGFUL only.
     Used for first-party "náš insight", the "Proč" panel, AI-citation & GEO
     markers. TEAL — a reserved hue kept DISTINCT from the violet brand and from
     every semantic colour, so it reads as "proprietary value", never status. */
  --insight-100: #CCFBF1;
  --insight-600: #0D9488;
  --insight-700: #0F766E;

  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---------------------------------------------------------------------
     SYSTEM — FIXED
     --------------------------------------------------------------------- */

  /* Neutrals — cool slate, the backbone of the tool (Lilac cool-neutral ramp). */
  --slate-0:   #FFFFFF;
  --slate-25:  #F6F8FB;   /* canvas */
  --slate-50:  #EEF2F7;   /* subtle */
  --slate-100: #E6EBF2;   /* hover */
  --slate-200: #DDE3EC;   /* dividers */
  --slate-300: #C4CDDA;
  --slate-400: #97A3B5;
  --slate-500: #637084;   /* muted text */
  --slate-600: #526277;   /* supporting text */
  --slate-700: #3B4B62;
  --slate-800: #22314A;
  --slate-900: #14243A;   /* primary text */

  /* Semantic — status, never decoration. Always paired with an icon+label. */
  --success-700: #0F6B46;
  --success-600: #16735A;
  --success-50:  #EDF7F2;
  --warning-700: #8A5700;
  --warning-600: #B45309;
  --warning-50:  #FFF6E5;
  --danger-700:  #A02121;
  --danger-600:  #B6353F;
  --danger-50:   #FFF1F1;
  --info-700:    #155E9C;
  --info-600:    #1C6FB8;
  --info-50:     #E3F0FA;

  /* Utility fonts */
  --font-ui:   "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (16px base). line-height baked in. */
  --fs-display-xl: 2.5rem;   --lh-display-xl: 2.75rem;
  --fs-display-l:  2rem;     --lh-display-l:  2.375rem;
  --fs-h1:         1.625rem; --lh-h1:         2rem;
  --fs-h2:         1.3125rem;--lh-h2:         1.75rem;
  --fs-h3:         1.0625rem;--lh-h3:         1.5rem;
  --fs-body-l:     1rem;     --lh-body-l:     1.625rem;
  --fs-body:       0.875rem; --lh-body:       1.375rem;   /* default UI text */
  --fs-label:      0.8125rem;--lh-label:      1.125rem;
  --fs-caption:    0.75rem;  --lh-caption:    1rem;
  --fs-mono:       0.8125rem;--lh-mono:       1.25rem;

  /* Spacing — 4px base grid */
  --sp-0: 0;      --sp-1: 2px;   --sp-2: 4px;   --sp-3: 8px;
  --sp-4: 12px;   --sp-5: 16px;  --sp-6: 20px;  --sp-7: 24px;
  --sp-8: 32px;   --sp-9: 40px;  --sp-10: 48px; --sp-12: 64px;

  /* Radius — Lilac proportions: controls 8, cards 10–12, dialogs 12. */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* Layout — the shell's fixed dimensions. */
  --sidebar-w: 224px;
  --topbar-h: 56px;
  --bottom-nav-h: 64px;

  /* Borders */
  --border-hairline: 1px solid var(--slate-200);
  --border-strong:   1px solid var(--slate-300);
  /* An explicit 3px ring outside a 2px gap — visible on white and on the canvas. */
  --focus-ring: 0 0 0 2px var(--slate-0), 0 0 0 5px var(--brand-600);

  /* Elevation — soft, cool-tinted */
  --shadow-xs: 0 1px 2px rgba(20,36,58,0.06);
  --shadow-sm: 0 1px 3px rgba(20,36,58,0.08), 0 1px 2px rgba(20,36,58,0.06);
  --shadow-md: 0 4px 12px rgba(20,36,58,0.10), 0 2px 4px rgba(20,36,58,0.06);
  --shadow-lg: 0 12px 32px rgba(20,36,58,0.14), 0 4px 8px rgba(20,36,58,0.08);

  /* Semantic role aliases (what components actually reference) */
  --bg-app:        var(--slate-25);
  --bg-surface:    var(--slate-0);
  --bg-subtle:     var(--slate-50);
  --bg-hover:      var(--slate-100);
  --text-primary:  var(--slate-900);
  --text-secondary:var(--slate-600);
  --text-muted:    var(--slate-500);
  --text-inverse:  var(--slate-0);
  --border-default:var(--slate-200);
  --link:          var(--brand-600);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
}

/* =========================================================================
   DARK MODE — long editorial sessions. Override role aliases + brand-on-dark.
   Toggle with <html data-theme="dark"> (or prefers-color-scheme).
   The Lilac dark palette: a violet-tinted charcoal, links lifted to #BE9EFF
   (7.45:1 on the surface), filled actions at #8246D9 (5.49:1 with white text).
   ========================================================================= */
[data-theme="dark"] {
  --bg-app:        #15141B;
  --bg-surface:    #201E29;
  --bg-subtle:     #2A2735;
  --bg-hover:      #332F40;
  --text-primary:  #F1EEF6;
  --text-secondary:#C1BACF;
  --text-muted:    #B5ADBF;
  --border-default:#443B52;
  --border-hairline: 1px solid #443B52;
  --border-strong:   1px solid #574C69;
  --link:          #BE9EFF;

  --brand-600: #BE9EFF;   /* links, focus, selection text */
  --brand-700: #D4BFFF;
  --brand-fill:       #8246D9;
  --brand-fill-hover: #7335CD;
  --brand-soft:        #332647;
  --brand-soft-border: #7955A8;
  --brand-text:        #D4BFFF;
  --insight-600: #2DD4BF; /* teal, lifted for ink */
  --success-600: #A3D8BD;
  --warning-600: #EFC67D;
  --danger-600:  #F0A6B1;
  --info-600:    #7FB6E8;

  /* Dark-native tints: the light -50/-700 values don't suit ink, so derive them
     from the theme-aware -600 — -50 becomes a translucent tint that composites
     over the dark surface, and -700 (used as on-tint TEXT) becomes the bright
     -600 so chips/panels/diffs read correctly in dark. */
  --brand-50:    color-mix(in srgb, var(--brand-600) 22%, transparent);
  --brand-100:   color-mix(in srgb, var(--brand-600) 28%, transparent);
  --brand-200:   color-mix(in srgb, var(--brand-600) 36%, transparent);
  --brand-300:   color-mix(in srgb, var(--brand-600) 48%, transparent);
  --success-50:  color-mix(in srgb, var(--success-600) 20%, transparent);
  --success-700: var(--success-600);
  --warning-50:  color-mix(in srgb, var(--warning-600) 20%, transparent);
  --warning-700: var(--warning-600);
  --danger-50:   color-mix(in srgb, var(--danger-600) 20%, transparent);
  --danger-700:  var(--danger-600);
  --info-50:     color-mix(in srgb, var(--info-600) 20%, transparent);
  --info-700:    var(--info-600);
  --insight-100: color-mix(in srgb, var(--insight-600) 24%, transparent);
  --insight-700: var(--insight-600);

  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 5px var(--brand-600);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-fast: 0ms; }
}