/* WealthWise Connect design tokens. Values and roles are documented in DESIGN.md. */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic.woff") format("woff");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --navy-950: #01001f;
  --navy-900: #020034;
  --navy-800: #0b0a45;
  --navy-700: #1c1a5e;
  --ivory-50: #fbfaf7;
  --ivory-100: #f7f5f0;
  --stone-200: #e2ddd1;
  --stone-500: #8e8aa3;
  --ink-600: #4a4866;
  --ink-500: #6b6984;
  --mist-300: #b9b7cf;
  --mist-400: #9a98b8;
  --gold-700: #7a5d0c;
  --gold-500: #a57d11;
  --gold-400: #c29a2e;
  --gold-300: #d4ae4e;
  --gold-200: #dcc07a;
  --success: #2e7d4f;
  --warning: #a86a00;
  --error: #b3261e;

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(40px, 4.9vw, 68px);
  --fs-h1: clamp(38px, 4.6vw, 60px);
  --fs-h2: clamp(30px, 3.4vw, 44px);
  --fs-h3: 24px;
  --fs-lead: clamp(18px, 1.6vw, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-caption: 13px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section-y: var(--s-10);
  --gutter: 24px;
  --content: 1200px;
  --measure: 64ch;

  /* Shape */
  --r-input: 8px;
  --r-card: 16px;
  --r-glass: 28px;
  --r-pill: 999px;
  --shadow-float: 0 24px 48px -16px rgba(1, 0, 31, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fade: 600ms;
}

@media (max-width: 720px) {
  :root {
    --section-y: 72px;
    --gutter: 16px;
  }
}