/* ============================================================
   Rai Wealth Management — Design Tokens
   Ethics · Expertise · Excellence
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --navy:           #182B49;
  --navy-deep:      #0E1F38;
  --navy-soft:      #22365A;
  --gold:           #AD8C25;
  --gold-deep:      #8A6F1D;
  --gold-soft:      #C9A847;

  /* ── Surface ────────────────────────────────────────────── */
  --cream:          #F8F4EC;
  --cream-soft:     #F1EADD;
  --cream-deep:     #E8DFCD;
  --ivory:          #FBFAF6;

  /* ── Text ───────────────────────────────────────────────── */
  --ink:            #0B1730;
  --body:           #2A2520;
  --muted:          #6F6757;
  --muted-soft:     #9A9285;
  --on-navy:        #F8F4EC;
  --on-navy-soft:   #A9B0BF;

  /* ── Hairlines ──────────────────────────────────────────── */
  --hairline:       #DDD4C0;
  --hairline-soft:  #E7DFC9;
  --hairline-navy:  #2C3F5E;

  /* ── Semantic ───────────────────────────────────────────── */
  --success:        #4A7A52;
  --warning:        #B68A36;
  --error:          #8B3A3A;

  /* ── Type ───────────────────────────────────────────────── */
  --font-display:   "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xxs:        4px;
  --space-xs:         8px;
  --space-sm:        12px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        32px;
  --space-xxl:       48px;
  --space-section:   96px;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-xs:        2px;
  --radius-sm:        4px;
  --radius-md:        6px;
  --radius-lg:       10px;
  --radius-xl:       14px;
  --radius-pill:    9999px;

  /* ── Shadow ─────────────────────────────────────────────── */
  --shadow-hover:    0 6px 20px rgba(11, 23, 48, 0.06);
  --shadow-modal:    0 24px 60px rgba(11, 23, 48, 0.14);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:           cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast:  160ms;
  --duration:       240ms;
  --duration-slow:  360ms;

  /* ── Layout ─────────────────────────────────────────────── */
  --content-max:    1200px;
  --measure:         680px;
  --nav-height:       72px;
}

html {
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
}

h1, h2, h3, h4 { margin: 0; }

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--gold); color: var(--on-navy); }