/* =============================================================================
   Lyncor Design System — Colors & Typography
   ----------------------------------------------------------------------------
   Health insurance & benefits brokerage. Visual system: deep navy + warm
   neutrals, serif wordmark, sans-serif body, classical / trustworthy tone.
   ============================================================================= */

/* ----- Type: Google Fonts substitutes for the Lyncor wordmark ---------------
   The wordmark is a wide, high-contrast didone-style serif with tight-tracked
   small caps below ("CORRETORA DE SEGUROS"). Closest free matches:
     - Display serif:  Cormorant Garamond (wide didone feel, elegant axis)
     - Alt display:    Prata (very close didone, narrower)
     - Body sans:      Inter (neutral, corporate, highly readable)
     - Label sans:     Inter w/ letter-spacing (stands in for tracked caps)
   FLAG TO USER: these are substitutes. If you have the original Lyncor
   typefaces (likely a custom or licensed didone like Bodoni/Didot), please
   attach the files and I'll swap them in.
----------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Prata&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* -------------------------------------------------------------------------
     BRAND COLORS
     ------------------------------------------------------------------------- */

  /* Primary navy — sampled directly from the logo background */
  --lyn-navy-900: #0d1a30;    /* darkest accent, headers on white */
  --lyn-navy-800: #122039;    /* deep navy, print */
  --lyn-navy-700: #162745;    /* BRAND NAVY — logo background */
  --lyn-navy-600: #1e3358;    /* hover / raised navy */
  --lyn-navy-500: #2a4370;    /* mid-navy, secondary surfaces */
  --lyn-navy-400: #4c6590;    /* muted navy for borders on navy */
  --lyn-navy-300: #7d90b0;    /* disabled / tertiary on navy */
  --lyn-navy-200: #b8c3d6;    /* very light navy, dividers */
  --lyn-navy-100: #e4e8f0;    /* tint, hover-bg on light */
  --lyn-navy-050: #f4f6fa;    /* softest wash, page alt bg */

  /* Warm neutral — paper + off-white (classical insurance aesthetic) */
  --lyn-paper:    #f7f4ee;    /* warm off-white, hero backgrounds */
  --lyn-cream:    #ede7d9;    /* warmer accent wash */
  --lyn-sand:     #d9cfb8;    /* warm divider */

  /* True neutrals */
  --lyn-white:    #ffffff;
  --lyn-gray-050: #fafafa;
  --lyn-gray-100: #f2f2f2;
  --lyn-gray-200: #e5e5e5;
  --lyn-gray-300: #d1d1d1;
  --lyn-gray-400: #a3a3a3;
  --lyn-gray-500: #737373;
  --lyn-gray-600: #525252;
  --lyn-gray-700: #404040;
  --lyn-gray-800: #262626;
  --lyn-gray-900: #171717;

  /* Gold — quiet accent, used SPARINGLY (dividers in logo, small caps) */
  --lyn-gold-700: #8a6f2c;
  --lyn-gold-500: #b8994f;
  --lyn-gold-300: #d4bd7e;
  --lyn-gold-100: #efe6cf;

  /* Semantic */
  --lyn-success: #2f7a4e;
  --lyn-success-bg: #e4f2ea;
  --lyn-warning: #b8872b;
  --lyn-warning-bg: #fbf0d6;
  --lyn-danger:  #b4342a;
  --lyn-danger-bg:  #fae5e3;
  --lyn-info:    #2a4370;   /* = navy-500 */
  --lyn-info-bg: #e4e8f0;

  /* -------------------------------------------------------------------------
     SEMANTIC ROLES — use these in components, not the raw palette above.
     ------------------------------------------------------------------------- */
  --fg-1: var(--lyn-navy-900);        /* primary text */
  --fg-2: var(--lyn-gray-700);        /* secondary text */
  --fg-3: var(--lyn-gray-500);        /* tertiary, meta */
  --fg-muted: var(--lyn-gray-400);
  --fg-on-navy: var(--lyn-white);
  --fg-on-navy-muted: var(--lyn-navy-200);
  --fg-accent: var(--lyn-gold-700);

  --bg-0: linear-gradient(135deg, #fdfbf7 0%, #f4f6fa 50%, #ffffff 100%); /* soft, elegant gradient */
  --bg-1: var(--lyn-paper);           /* hero / section alt */
  --bg-2: var(--lyn-gray-050);
  --bg-3: var(--lyn-navy-050);
  --bg-navy: var(--lyn-navy-700);     /* brand-filled surfaces */
  --bg-navy-deep: var(--lyn-navy-900);

  --border-1: var(--lyn-gray-200);
  --border-2: var(--lyn-gray-300);
  --border-navy: var(--lyn-navy-200);
  --divider-gold: var(--lyn-gold-500);

  --link: var(--lyn-navy-700);
  --link-hover: var(--lyn-navy-900);

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Prata', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-label:   var(--font-body);    /* same as body, differentiated by tracking + case */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (desktop) */
  --fs-display-xl: 88px;   /* hero wordmark-scale */
  --fs-display-lg: 64px;
  --fs-display-md: 48px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-label:   12px;      /* tracked small caps */

  /* Line-height */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Letter-spacing — tracked caps mirror the wordmark subtitle */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.22em;   /* "CORRETORA DE SEGUROS" vibe */

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* -------------------------------------------------------------------------
     SPACING  (4px base grid)
     ------------------------------------------------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* -------------------------------------------------------------------------
     RADII — generally SMALL. Insurance = traditional, not playful.
     ------------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;   /* default for buttons/fields */
  --radius-lg: 10px;  /* cards */
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* -------------------------------------------------------------------------
     SHADOWS — soft, long, cool-tinted (navy at low alpha, not pure black)
     ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(13, 26, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(13, 26, 48, 0.07);
  --shadow-md: 0 6px 16px rgba(13, 26, 48, 0.08);
  --shadow-lg: 0 14px 32px rgba(13, 26, 48, 0.10);
  --shadow-xl: 0 28px 56px rgba(13, 26, 48, 0.14);
  --shadow-inset: inset 0 1px 2px rgba(13, 26, 48, 0.06);

  /* -------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast:   140ms;
  --dur-med:    260ms;
  --dur-slow:   500ms;
}

/* =============================================================================
   SEMANTIC TYPE STYLES — use these class-like resets, or copy the rules.
   ============================================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — Cormorant Garamond, like the wordmark itself */
.lyn-display-xl, .lyn-display-lg, .lyn-display-md,
.lyn-h1, .lyn-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.lyn-display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-light); }
.lyn-display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-regular); }
.lyn-display-md { font-size: var(--fs-display-md); font-weight: var(--fw-regular); }

.lyn-h1 { font-size: var(--fs-h1); font-weight: var(--fw-medium); }
.lyn-h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); }

/* H3+ switch back to sans for compactness/hierarchy variety */
.lyn-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.lyn-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Eyebrow / tracked caps — mirrors the wordmark subtitle */
.lyn-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-accent);
}

.lyn-eyebrow--muted { color: var(--fg-3); }
.lyn-eyebrow--on-navy { color: var(--fg-on-navy-muted); }

/* Body */
.lyn-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lyn-body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); }
.lyn-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.lyn-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }

/* Links — quietly emphatic; no underline unless hovered */
a, .lyn-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a:hover, .lyn-link:hover {
  color: var(--link-hover);
  border-bottom-color: var(--divider-gold);
}

/* Logo-style divider: thin gold rule, decorative only */
.lyn-rule-gold {
  border: 0;
  border-top: 1px solid var(--divider-gold);
  width: 48px;
  margin: var(--sp-4) 0;
}

/* Utility */
.lyn-bg-navy { background: var(--bg-navy); color: var(--fg-on-navy); }
.lyn-bg-paper { background: var(--bg-1); }
.lyn-container { max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-7); }