/* ==================================================================
   Transila Office — shared theme tokens
   Added 2026-08-18.

   WHY THIS FILE EXISTS: every tool workspace previously defined its
   own :root custom properties, reusing the SAME variable names
   (--bg, --accent, --text, --font, --radius...) with different
   values in every file — six different "brand purple" shades, three
   unrelated font stacks, no single source of truth. That's the
   inconsistency a careful user notices moving between tools.

   HOW IT WORKS: this file is loaded via <link> AFTER each page's own
   <style> block, so for any custom property name a page already
   references via var(...), this file's value wins the CSS cascade
   (same specificity, later source order) — without needing to touch
   every individual color declaration inside each tool.

   Canonical palette = the one already shared by landing.html /
   subscribe.html / success.html / transila-pro (warm cream + navy +
   gold), since that's the palette with the most real design intent
   already invested in it, and the one most files were already close to.

   SCOPE: linked from the marketing pages, and from tool workspaces
   that already use CSS custom properties for their colors. NOT linked
   into the main dashboard (public/index.html) or the admin panel —
   the dashboard already has its own working light/dark toggle system
   (left untouched to avoid breaking it), and the admin panel is an
   internal-only tool where a distinct visual identity is a deliberate,
   common pattern (flag if you'd rather it match too).

   NOT fully solved by this file: doc-translator and unit-converter
   hardcode raw hex colors directly rather than referencing custom
   properties, so this stylesheet has no effect on them yet — they
   need a manual pass, not just a token override. quran-lookup's green
   header gradient (--bg-header) is left alone deliberately, since
   that's tied to its Quranic-content theme, not a design accident.
   ================================================================== */

:root {
  /* backgrounds */
  --bg:               #f5f2ed;
  --bg2:              #edeae3;
  --bg3:              #e6e2d9;
  --bg-main:          #f5f2ed;
  --bg-sidebar:       #edeae3;
  --bg-element:       #ffffff;
  --bg-element-hover: #f5f1e9;
  --bg-card:          #ffffff;
  --bg-input:         #faf9f6;

  /* text */
  --text:             #2c3550;
  --text2:            #6b7280;
  --text-primary:     #2c3550;
  --text-secondary:   #6b7280;
  --text-heading:     #1a3a5c;
  --text-muted:       #8890aa;

  /* accents — one brand pair, used everywhere */
  --accent:           #1a3a5c; /* navy — primary */
  --accent2:          #c8873a; /* gold — secondary */
  --accent-light:     #e8f0f8;
  --accent-green:     #0f9e6f;
  --accent-orange:    #c8891a;
  --accent-red:       #e53e3e;

  /* type */
  --font:             'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:        'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-heading:     'Playfair Display', 'DM Sans', serif;
  --font-mono:        'DM Mono', 'Consolas', monospace;

  /* shape */
  --radius:           10px;
  --shadow:           0 4px 16px rgba(26,58,92,0.08);
}