/* Trovik canonical brand tokens — single source of truth.
 *
 * Source: /docs/trovik-brand (admin-only). Update there first; mirror
 * here. Every brand-relevant page on the dashboard imports this file
 * via <link rel="stylesheet" href="/static/css/trovik-tokens.css"> so
 * a future palette tweak is a one-file change.
 *
 * Do NOT hardcode hex literals in page CSS. Reference the variables.
 *
 *   palette  — gold, stone, cream, blood, charcoal/slate dark stack
 *   fonts    — Rajdhani (display + heading + body), IBM Plex Mono (code)
 *   shadows  — gold glow + dark elevation
 *   radii    — 4 / 6 / 8 / 10 / 12 / 999px
 *
 * The :root block also declares legacy aliases (--bg, --border, --text,
 * etc.) so existing pages can adopt the tokens incrementally without
 * touching every inline style at once. New code should reach for the
 * fully-qualified --trovik-* names directly.
 */

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

:root {
  /* ─── Canonical palette ───────────────────────────────────
     Names match the OG brand palette image (Gold, Stone, Charcoal,
     Slate, Blood). Charcoal and Slate are split into UI-stack tunings
     (black / bg / bg-elevated / border / border-hl) so panel layering
     works at multiple depths. Cream is a warm gold-on-gold highlight
     distinct from Stone (neutral warm-grey).
  */
  --trovik-gold-bright:   #f5c542;   /* accent gold (the "Trovik" wordmark gold) */
  --trovik-gold:          #d4af37;   /* metal gold — primary brand */
  --trovik-gold-deep:     #8a7000;   /* deep gold for borders / mid-tones */
  --trovik-gold-dim:      #5a4800;   /* very dim gold */
  --trovik-stone:         #ebe4da;   /* canonical "Stone" — neutral warm-grey */
  --trovik-cream:         #fff5d6;   /* cream highlight on gold backgrounds */
  --trovik-blood:         #8b1e1e;   /* canonical "Blood" — deep brand red */
  --trovik-black:         #080b0e;   /* page base */
  --trovik-bg:            #0d1117;   /* panel surface */
  --trovik-bg-elevated:   #111820;   /* elevated card surface */
  --trovik-border:        #1c2530;   /* default border */
  --trovik-border-hl:     #253040;   /* highlighted border */
  --trovik-text:          #cdd5de;   /* body */
  --trovik-text-bright:   #eaf0f6;   /* headings, important */
  --trovik-text-dim:      #546878;   /* muted / secondary */

  /* ─── UI accent tones (semantic, not brand-canonical) ─────
     Distinct from --trovik-blood: blood is the deep brand red used in
     marketing + headers + emphasis. The accents below are for
     functional UI states (errors, success, warning) and are tuned for
     legibility on the Trovik dark stack.
  */
  --trovik-green:         #00e87a;   /* success / live / OK */
  --trovik-green-dim:     #00623a;
  --trovik-red:           #ff3355;   /* error / destructive (UI accent) */
  --trovik-amber:         #d29922;   /* warning / paper-mode pill */
  --trovik-blue:          #58a6ff;   /* info / link */

  /* ─── Typography ──────────────────────────────────────────
     Rajdhani is the official Trovik brand font. IBM Plex Mono is the
     canonical companion for code, file paths, hex codes, lamports —
     anything aligned-by-character. Do not introduce additional families.
  */
  --font-trovik-display:  'Rajdhani', sans-serif;
  --font-trovik-head:     'Rajdhani', sans-serif;
  --font-trovik-body:     'Rajdhani', sans-serif;
  --font-trovik-mono:     'IBM Plex Mono', monospace;

  /* ─── Shadows + radii ─────────────────────────────────────
     Gold glows for hero / hover treatments; dark elevations for cards.
  */
  --trovik-glow-gold:     0 0 24px rgba(212, 175, 55, 0.32);
  --trovik-glow-gold-lg:  0 16px 60px rgba(212, 175, 55, 0.45),
                          0 0 30px rgba(212, 175, 55, 0.20);
  --trovik-shadow-card:   0 8px 24px rgba(0, 0, 0, 0.40);
  --trovik-shadow-card-lg: 0 24px 70px rgba(0, 0, 0, 0.45);

  --trovik-radius-sm:     4px;
  --trovik-radius-md:     6px;
  --trovik-radius:        8px;
  --trovik-radius-lg:     10px;
  --trovik-radius-xl:     12px;
  --trovik-radius-pill:   999px;

  /* ─── Legacy aliases ──────────────────────────────────────
     Existing pages reference --bg / --border / --text / --gold etc.
     Aliasing those to the canonical tokens lets every adopter pick
     up the brand palette without per-rule edits. New code should use
     the --trovik-* names directly so the alias layer can shrink over
     time.
  */
  --bg:           var(--trovik-black);
  --bg2:          var(--trovik-bg);
  --bg3:          var(--trovik-bg-elevated);
  --border:       var(--trovik-border);
  --border2:      var(--trovik-border-hl);
  --text:         var(--trovik-text);
  --text-bright:  var(--trovik-text-bright);
  --text-dim:     var(--trovik-text-dim);
  --gold:         var(--trovik-gold);
  --gold-warm:    var(--trovik-gold-bright);
  --gold-dim:     var(--trovik-gold-dim);
  --green:        var(--trovik-green);
  --green-dim:    var(--trovik-green-dim);
  --red:          var(--trovik-red);
  --yellow:       var(--trovik-amber);
  --cyan:         var(--trovik-blue);

  --font-display: var(--font-trovik-display);
  --font-head:    var(--font-trovik-head);
  --font-body:    var(--font-trovik-body);
  --font-mono:    var(--font-trovik-mono);
}