/* ============================================================
   LEXARA — Design Tokens  (css/tokens.css)
   Import this FIRST in every page stylesheet.
   ============================================================ */
:root {
  /* Brand */
  --navy:       #07101f;
  --navy-2:     #0d1b2e;
  --navy-3:     #112240;
  --navy-4:     #1a3358;
  --gold:       #c9a84c;
  --gold-lt:    #e2c27a;
  --gold-dim:   rgba(201,168,76,.13);

  /* Neutral */
  --white:      #ffffff;
  --grey-200:   #e2e5ea;
  --grey-400:   #9aa3b0;
  --grey-600:   #5a6474;
  --grey-800:   #1e2530;

  /* Semantic */
  --green:      #22c55e;
  --red:        #ef4444;
  --blue:       #3b82f6;
  --amber:      #f59e0b;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;

  /* Spacing */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px;
  --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-40:40px;
  --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-80:80px;

  /* Radius */
  --r-sm:6px; --r:10px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:100px;

  /* Shadows */
  --shadow-sm:  0 2px 10px rgba(0,0,0,.35);
  --shadow-md:  0 6px 24px rgba(0,0,0,.4);
  --shadow-lg:  0 14px 44px rgba(0,0,0,.5);
  --shadow-gold:0 6px 20px rgba(201,168,76,.3);

  /* Borders */
  --border:      1px solid rgba(255,255,255,.07);
  --border-gold: 1px solid rgba(201,168,76,.25);

  /* Transitions */
  --trans:      all .22s cubic-bezier(.4,0,.2,1);
  --trans-fast: all .14s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --nav-h:      68px;
  --sidebar-w:  240px;
  --admin-sw:   220px;
  --max-w:      1280px;
}