/* ==========================================================================
   MAISAL FINANCE — Design Preview · Design Tokens
   "Premium Editorial Financial Professional"
   Self-contained. No CDN. Fonts are self-hosted (variable woff2, latin subset).
   ========================================================================== */

/* ----- Self-hosted type (no CDN at runtime) ----- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/hanken-normal.woff2') format('woff2');
}

:root {
  /* ---- Type families ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Colour: warm ivory paper, deep ink, one muted-teal accent ---- */
  --paper:        #FBF9F5;  /* page — warm ivory */
  --paper-2:      #F3EEE5;  /* soft-stone alternate band (a real, visible step) */
  --surface:      #FFFFFF;  /* card / raised surface where genuinely needed */

  --ink:          #1C2622;  /* primary text — deep charcoal-green */
  --ink-soft:     #47514B;  /* secondary text */
  --ink-mute:     #79817B;  /* captions / meta */

  --teal:         #115E56;  /* primary brand accent — deep muted teal */
  --teal-strong:  #0B463F;  /* hover / pressed */
  --teal-soft:    #E4EEEB;  /* accent tint surface */
  --teal-line:    #BFD6D0;  /* accent hairline */

  --clay:         #9C6B42;  /* secondary accent — warm bronze, used sparingly */
  --clay-soft:    #F0E7DC;

  --line:         #E7E1D6;  /* low-contrast warm neutral border */
  --line-strong:  #D8CFC0;

  --deep:         #10231F;  /* dark section ground — deep teal-charcoal */
  --deep-2:       #0A1814;  /* deeper (footer base / vignette core) */
  --on-deep:      #F3EFE7;  /* text on dark */
  --on-deep-soft: #A6B4AC;  /* muted text on dark */
  --deep-line:    rgba(243,239,231,0.14);

  --wa-green:     #25D366;  /* WhatsApp — channel cue only, never a surface */
  --focus:        #1C7A6F;  /* focus ring (AA on paper) */

  /* ---- Type scale (editorial, fluid) ---- */
  --fs-display:  clamp(2.6rem, 1.9rem + 3.4vw, 4.5rem);
  --fs-h1:       clamp(2.05rem, 1.6rem + 2.2vw, 3.15rem);
  --fs-h2:       clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem);
  --fs-h3:       1.35rem;
  --fs-h4:       1.1rem;
  --fs-eyebrow:  0.78rem;
  --fs-lead:     clamp(1.12rem, 1.02rem + 0.5vw, 1.32rem);
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;     /* 16px floor — never smaller for reading copy */
  --fs-small:    0.9rem;
  --fs-caption:  0.8rem;
  --fs-legal:    0.86rem;

  --lh-tight:    1.08;
  --lh-snug:     1.28;
  --lh-body:     1.66;
  --tracking-eyebrow: 0.16em;
  --tracking-tight:   -0.015em;
  --tracking-display: -0.02em;

  /* ---- Spacing (8pt-ish rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);   /* vertical section padding */

  /* ---- Layout ---- */
  --container: 1200px;      /* reading/content max */
  --container-wide: 1360px; /* media/wide bands */
  --gutter: clamp(1rem, 0.4rem + 2vw, 2.5rem);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Elevation (one confident tier) ---- */
  --shadow-1: 0 1px 2px rgba(28,38,34,0.04), 0 6px 20px -12px rgba(28,38,34,0.16);
  --shadow-2: 0 2px 6px rgba(28,38,34,0.06), 0 20px 44px -20px rgba(28,38,34,0.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 180ms;
  --dur-2: 380ms;
  --dur-reveal: 620ms;
}