/* ============================================================
   Search.TheFinanceStory — Design Tokens
   tokens.css
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────── */
  --brand:           #0057D9;   /* Authoritative Blue — CTAs, salary, accent */
  --brand-hover:     #0049b8;   /* Button hover state                        */
  --brand-light:     #4a87f5;
  --brand-pale:      #eef2ff;
  --brand-mid:       #93b4f7;
  --brand-dark:      #003eb0;
  --blue-light:      #6aa3ff;   /* Accents on dark backgrounds               */
  --navy:            #0b1120;   /* Deep navy — nav, hero bg                  */
  --navy-surface:    #0d1829;   /* Elevated dark surface                     */

  /* ── Editorial Gold ────────────────── */
  --gold:            #c9920f;   /* Amber — editorial headlines, italic em    */
  --gold-light:      #e6b84a;   /* On dark surfaces                          */
  --gold-pale:       #fef9ec;   /* Pale gold bg                              */

  /* ── Ink ────────────────────────────── */
  --ink:             #0d1117;   /* Primary text — rich deep ink              */
  --ink-soft:        #3d4a5a;   /* Secondary text                            */
  --ink-meta:        #6b7a8d;   /* Location, exp, metadata                  */
  --ink-muted:       #9ea8b4;   /* Timestamps, labels                        */

  /* ── Surfaces ───────────────────────── */
  --paper:           #f0f0ec;   /* Page bg — warm cream                      */
  --cream:           #e8e7e1;
  --white:           #ffffff;   /* Cards / surfaces                          */

  /* ── Borders ────────────────────────── */
  --border:          #dde1e7;   /* Dividers, card borders                    */
  --border-soft:     #e8eaed;
  --border-dark:     #c5cbd5;

  /* ── Function colours ───────────────── */
  --fn-fpa:          #0057D9;
  --fn-tax:          #d97706;
  --fn-risk:         #dc2626;
  --fn-ctrl:         #6d28d9;
  --fn-audit:        #059669;
  --fn-treasury:     #0e7490;

  /* ── Status ─────────────────────────── */
  --success:         #059669;
  --success-pale:    #ecfdf3;
  --success-border:  #a3e6c7;
  --warning:         #d97706;
  --warning-pale:    #fffaeb;
  --warning-border:  #fde68a;
  --danger:          #dc2626;
  --danger-pale:     #fef3f2;
  --danger-border:   #fda29b;

  /* ── Shadows ────────────────────────── */
  --shadow-sm:       0 1px 4px rgba(7,16,24,.08);
  --shadow-md:       0 4px 20px rgba(7,16,24,.10);
  --shadow-lg:       0 8px 40px rgba(7,16,24,.16);
  --shadow-brand:    0 8px 24px rgba(0,87,217,.28);

  /* ── Radius ─────────────────────────── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;

  /* ── Layout ─────────────────────────── */
  --nav-h: 64px;
}