/* ============================================================
   SOL SEGUROS — Design Tokens: Colors & Type
   Luanda, Angola
   Brand metaphor: o sol que nasce todas as manhãs (the rising sun)
   ------------------------------------------------------------
   Fonts: Myriad Pro (brand typeface, self-hosted from /fonts).
   Static weights available: 400 + 700 (Regular/Bold, w/ italics).
   Spline Sans Mono (CDN) covers monospace.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:wght@400;500;600&display=swap');

/* ---- Brand typeface: Myriad Pro (self-hosted, user-supplied) ---- */
@font-face {
  font-family: 'Myriad Pro';
  src: url('fonts/MyriadPro-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('fonts/MyriadPro-It.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('fonts/MyriadPro-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('fonts/MyriadPro-BoldIt.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ---------- BRAND ---------- */
  --sol-yellow:      #FECB00;  /* primary — "Sol" / the sun. The single hero color. */
  --sol-yellow-press:#E0B200;  /* pressed / darker amber */
  --sol-yellow-hover:#FFD629;  /* hover lift */
  --sol-yellow-200:  #FFE680;  /* tint */
  --sol-yellow-100:  #FFF3C2;  /* soft fill */
  --sol-yellow-050:  #FFFAE5;  /* faintest wash */

  /* ---------- INK (warm near-black, from the icon glyphs) ---------- */
  --ink:             #1A1A18;  /* primary text & dark surfaces */
  --ink-soft:        #2B2B27;  /* raised dark surface */
  --ink-700:         #3D3D38;

  /* ---------- WARM NEUTRALS ---------- */
  --n-900: #1A1A18;
  --n-800: #33322E;
  --n-700: #4D4B45;
  --n-600: #6B6860;  /* secondary text */
  --n-500: #8C887E;  /* muted / placeholder */
  --n-400: #B0ABA0;  /* disabled */
  --n-300: #D4CFC4;  /* borders strong */
  --n-200: #E7E3DA;  /* borders / dividers */
  --n-150: #EFEBE3;
  --n-100: #F5F2EB;  /* subtle fill */
  --n-050: #FAF8F3;  /* paper / page background */
  --white: #FFFFFF;

  /* ---------- SEMANTIC (muted to sit beside the warm yellow) ---------- */
  --success:     #2E9E5B;
  --success-bg:  #E6F4EC;
  --danger:      #D14A3C;   /* "perigo" */
  --danger-bg:   #FBEAE7;
  --warning:     #F2A900;
  --warning-bg:  #FFF1D6;
  --info:        #2F6FB0;
  --info-bg:     #E7F0F9;

  /* ---------- SEMANTIC SURFACE / TEXT ALIASES ---------- */
  --fg1: var(--ink);     /* primary text */
  --fg2: var(--n-600);   /* secondary text */
  --fg3: var(--n-500);   /* tertiary / muted */
  --fg-on-yellow: var(--ink);   /* text on yellow is always ink */
  --fg-on-dark:   #F7F5F0;      /* text on ink surfaces */
  --bg-page:    var(--n-050);
  --bg-surface: var(--white);
  --bg-sunk:    var(--n-100);
  --border:     var(--n-200);
  --border-strong: var(--n-300);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Myriad Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Myriad Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE (rem @ 16px root) ---------- */
  --text-display: 4.0rem;   /* 64 — hero numerals / big statements */
  --text-h1:      2.75rem;  /* 44 */
  --text-h2:      2.0rem;   /* 32 */
  --text-h3:      1.5rem;   /* 24 */
  --text-h4:      1.25rem;  /* 20 */
  --text-lg:      1.125rem; /* 18 */
  --text-body:    1.0rem;   /* 16 */
  --text-sm:      0.875rem; /* 14 */
  --text-xs:      0.75rem;  /* 12 — legal / captions */

  --lh-tight: 1.05; /* @kind other */
  --lh-snug:  1.2; /* @kind other */
  --lh-body:  1.55; /* @kind other */

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-caps: 0.08em;   /* the brand's ALL-CAPS taglines */

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm, low) ---------- */
  --shadow-sm: 0 1px 2px rgba(26,26,24,.06), 0 1px 1px rgba(26,26,24,.04);
  --shadow-md: 0 4px 14px rgba(26,26,24,.08);
  --shadow-lg: 0 14px 40px rgba(26,26,24,.12);
  --shadow-yellow: 0 8px 24px rgba(254,203,0,.35);

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --dur: 180ms; /* @kind other */
}

/* ============================================================
   BASE — global defaults so bare text inherits the brand font
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--fg1);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply with class or element
   ============================================================ */
.ss-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h1, .ss-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h2, .ss-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h3, .ss-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.25;
  color: var(--fg1);
}
h4, .ss-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h4);
  line-height: 1.3;
  color: var(--fg1);
}
.ss-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--n-600);
}
/* The signature brand voice: ALL-CAPS tagline */
.ss-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg1);
}
p, .ss-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg1);
}
.ss-lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--n-700);
}
.ss-small { font-size: var(--text-sm); color: var(--fg2); }
.ss-legal { font-size: var(--text-xs); line-height: 1.5; color: var(--fg3); }
code, .ss-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}