/* ═══════════════════════════════════════════════════════════════════
   tokens.css  —  FinNavigator™ v1.0
   Design tokens, typography, resets — the single source of truth
   for all visual values.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design tokens ── */
:root {
  /* Brand palette */
  --navy:        #0F2540;
  --navy-mid:    #1A3A5C;
  --blue:        #2E6DA4;
  --blue-light:  #4A8EC2;
  --light-blue:  #D6E8F7;
  --gold:        #C8A84B;
  --gold-dark:   #A8882B;
  --gold-light:  #E8C96B;

  /* Semantic surface */
  --bg:          #F0F6FC;
  --bg-alt:      #EAF1F9;
  --surface:     #FFFFFF;
  --surface-alt: #F8FBFF;
  --border:      #BACFE8;
  --border-light:#DDEAF5;
  --muted:       #64748b;
  --text:        #1A3A5C;
  --text-light:  #475569;

  /* Status */
  --green:       #15803d;
  --green-bg:    #F0FDF4;
  --green-bdr:   #BBF7D0;
  --amber:       #92400e;
  --amber-bg:    #FFF7ED;
  --amber-bdr:   #FED7AA;
  --red:         #991b1b;
  --red-bg:      #FFF1F2;
  --red-bdr:     #FECDD3;

  /* Layout */
  --sidebar-w:   230px;
  --card-pad:    36px;
  --card-pad-sm: 18px;

  /* Shape */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-xs:   6px;

  /* Shadow */
  --shadow:      0 4px 24px rgba(26,58,92,0.10);
  --shadow-lg:   0 8px 40px rgba(26,58,92,0.16);
  --shadow-sm:   0 2px 8px  rgba(26,58,92,0.08);

  /* Typography */
  --font-body:   'Inter', -apple-system, sans-serif;
  --font-serif:  'Playfair Display', Georgia, serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:     var(--font-body);
  font-weight:     400;
  color:           var(--text);
  background:      var(--bg);
  line-height:     1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
  font-size:   inherit;
}

button { cursor: pointer; }

a { color: var(--blue); }
a:hover { color: var(--navy); }

/* ── Typography scale ── */
.fn-serif { font-family: var(--font-serif); }

h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--navy); line-height: 1.2; }
h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--navy); line-height: 1.3; }
h3 { font-size: 16px; font-weight: 700; color: var(--navy); }

/* ── Utility classes ── */
.u-flex    { display: flex; }
.u-grid    { display: grid; }
.u-center  { display: flex; align-items: center; justify-content: center; }
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }