/* =====================================================================
   SEGUROSNET — Design Tokens
   Insurance wallet app · Brazilian Portuguese
   Colors and type derived from Figma "Fundamentos de Design".
   ===================================================================== */

/* Inter is the single brand font (4 weights in regular product use).
   Self-hosted variable fonts — covers 100→900 + italic in two files. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
}

:root {
  /* ───────────────── BRAND ───────────────── */
  --seg-blue: #131F52;           /* Primary navy, headings, dark surfaces  */
  --seg-green: #BAD455;          /* Primary CTA lime, brand accent         */

  /* Seg Blue ramp (50 → 150) */
  --seg-blue-50:  #F3F4F6;
  --seg-blue-60:  #D0D2DC;
  --seg-blue-70:  #A1A5BA;
  --seg-blue-80:  #717997;
  --seg-blue-90:  #424C75;
  --seg-blue-100: #131F52;       /* base */
  --seg-blue-110: #0B1331;
  --seg-blue-120: #080C21;
  --seg-blue-130: #040610;
  --seg-blue-140: #010204;
  --seg-blue-150: #000000;

  /* Seg Green ramp (50 → 150) */
  --seg-green-50:  #FBFDF6;
  --seg-green-60:  #F1F6DD;
  --seg-green-70:  #E3EEBB;
  --seg-green-80:  #D6E599;
  --seg-green-90:  #C8DD77;
  --seg-green-100: #BAD455;      /* base */
  --seg-green-110: #707F33;
  --seg-green-120: #4A5522;
  --seg-green-130: #252A11;
  --seg-green-140: #090B04;

  /* Brand droplet & gradient */
  --brand-droplet-blue: #131F52;
  --brand-droplet-green: #BAD455;

  /* ───────────────── SEMANTIC ───────────────── */
  --info:    #0D5593;
  --info-light: #C2D4E4;
  --info-dark:  #0A406E;
  --info-bg:    #85A9C8;

  --success:    #549100;
  --success-light: #D4E3BF;
  --success-bg:    #F1F6DD;
  --success-dark:  #2A4800;

  --error:    #AF150D;
  --error-light: #EBC4C2;
  --error-dark:  #83100A;
  --error-bg:    #D68985;

  --alert:    #D98100;           /* warning / alert orange */
  --alert-light: #F5DFBF;
  --alert-bg:    #ECBF7F;

  /* ───────────────── NEUTRALS ───────────────── */
  --white: #FFFFFF;
  --black: #000000;
  --black-blue: #010204;         /* Black B */
  --black-green: #090B04;        /* Black G */

  --gray-05: #F2F2FF;            /* App background lavender */
  --gray-10: #E6E6FA;            /* Nav bar / soft surface */
  --gray-20: #CCCCE0;
  --gray-30: #B3B3C7;
  --gray-40: #9999AD;
  --gray-50: #7F7F94;
  --gray-60: #66667A;
  --gray-70: #4D4D61;
  --gray-80: #333347;
  --gray-90: #1A1A2E;

  /* ───────────────── SEMANTIC SURFACE / TEXT ───────────────── */
  --bg-app:        var(--gray-05);   /* #F2F2FF — main app background */
  --bg-surface:    var(--white);     /* cards, sheets */
  --bg-muted:      #F3F4F6;          /* input fields, dividers fill */
  --bg-nav:        var(--gray-10);   /* bottom tab bar */
  --bg-header:     var(--seg-green); /* lime hero band on profile */

  --fg-strong:     var(--seg-blue);  /* H1 / important figures (#131F52)*/
  --fg-default:    #424C75;          /* Body text default */
  --fg-secondary:  #717997;          /* Subdued labels */
  --fg-muted:      #A1A5BA;          /* Placeholder, meta, helpers */
  --fg-on-brand:   #333347;          /* Text on lime CTA */
  --fg-on-dark:    var(--white);

  --border-soft:   #E6E6FA;
  --border-strong: #CCCCE0;

  /* Action / link */
  --link:          #0D5593;
  --action-bg:     var(--seg-green);
  --action-bg-soft:#F1F6DD;
  --action-fg:     #333347;

  /* ───────────────── SHADOWS ───────────────── */
  /* The Figma source defines a single shadow primitive applied to cards. */
  --shadow-card:
      0 4px 4px -1px rgba(12,12,13,0.05),
      0 4px 4px -1px rgba(12,12,13,0.10);
  --shadow-pop:
      0 8px 18px -4px rgba(19,31,82,0.18),
      0 2px 6px -2px rgba(12,12,13,0.10);
  --shadow-protection:
      0 0 0 4px var(--white),
      0 6px 18px -4px rgba(19,31,82,0.25);

  /* Hero protection gradient (header img → navy at bottom) */
  --gradient-hero-shadow:
      linear-gradient(to bottom, rgba(9,15,39,0) 0%, #131F52 100%);
  /* Splash gradient image lives at assets/images/splash-gradient.png */

  /* ───────────────── RADIUS ───────────────── */
  --radius-xs:  8px;
  --radius-sm:  12px;   /* input field */
  --radius-md:  18px;   /* default card */
  --radius-lg:  20px;   /* pill, brand swatch */
  --radius-xl:  35px;   /* nav bar / sheet top */
  --radius-2xl: 40px;   /* large rounded section */
  --radius-pill: 9999px;

  /* ───────────────── SPACING ───────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 10px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 20px;
  --s-7: 24px;
  --s-8: 32px;
  --s-9: 40px;
  --s-10: 56px;

  /* ───────────────── TYPOGRAPHY ───────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Display / Heading scale (Inter Bold) */
  --fs-display:  56px;     /* Splash / hero page title */
  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 32px;
  --fs-h4: 24px;           /* Section title in app  */
  --fs-h5: 20px;
  --fs-h6: 16px;

  /* Body */
  --fs-body-1: 20px;       /* Lead / hero subtitle */
  --fs-body-2: 18px;
  --fs-body-3: 16px;       /* Default body */
  --fs-body-4: 14px;       /* Small / caption */
  --fs-caption: 12px;      /* Nav labels, hints */
}

/* =====================================================================
   Reset-lite + base elements
   ===================================================================== */
html, body {
  background: var(--bg-app);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body-3);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--fg-strong); font-weight: var(--fw-bold); line-height: 1.1; margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p  { font-size: var(--fs-body-3); color: var(--fg-default); margin: 0; }
small { font-size: var(--fs-body-4); color: var(--fg-secondary); }

a  { color: var(--link); text-decoration: none; }
a:hover { opacity: 0.85; }

button { font-family: inherit; }

/* =====================================================================
   Reusable semantic helpers (optional, used across previews)
   ===================================================================== */
.sn-display { font-size: var(--fs-display); font-weight: var(--fw-bold); color: var(--fg-strong); letter-spacing: -0.01em; }
.sn-lead    { font-size: var(--fs-body-1); color: var(--fg-secondary); font-weight: var(--fw-regular); }
.sn-eyebrow { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-secondary); }

.sn-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--action-bg-soft); color: var(--success); font-size: 12px; font-weight: var(--fw-semibold);
}

/* Primary lime CTA */
.sn-btn-primary {
  height: 40px; padding: 0 24px;
  border-radius: var(--radius-lg);
  background: var(--seg-green); color: var(--action-fg);
  font-size: var(--fs-body-3); font-weight: var(--fw-regular);
  border: 0; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, filter 120ms ease;
}
.sn-btn-primary:hover { filter: brightness(0.96); }
.sn-btn-primary:active { transform: scale(0.98); }

/* Soft pale-lime secondary */
.sn-btn-secondary {
  height: 30px; padding: 0 20px;
  border-radius: var(--radius-lg);
  background: var(--action-bg-soft); color: var(--gray-80);
  font-size: var(--fs-body-4); font-weight: var(--fw-regular);
  border: 0; cursor: pointer;
}

/* Ghost / neutral pill */
.sn-btn-ghost {
  height: 30px; padding: 0 20px;
  border-radius: var(--radius-lg);
  background: var(--gray-10); color: var(--seg-blue-80);
  font-size: var(--fs-body-4); border: 0; cursor: pointer;
}

/* Card */
.sn-card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}