/* ============================================================
   Anna Serra — Colors & Type tokens
   Studio di Consulenza del Lavoro · Lipari (ME)
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-wght-variable.ttf') format('truetype-variations'),
       url('../fonts/PlayfairDisplay-wght-variable.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-opsz-wght-variable.ttf') format('truetype-variations'),
       url('../fonts/Inter-opsz-wght-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand colors ---------- */
  --as-navy:        #1D4E6B;   /* Primary  — headers, nav, footer, CTAs */
  --as-navy-deep:   #163E55;   /* Hover/press for navy */
  --as-navy-700:    #18445E;
  --as-steel:       #2E7D9F;   /* Secondary — links, highlights */
  --as-steel-soft:  #4A95B5;   /* hover on steel links */
  --as-amber:       #C8922A;   /* Accent — callouts, badges, CTA */
  --as-amber-deep:  #A87716;   /* Amber hover/press */
  --as-amber-soft:  #E0B255;   /* Amber light, for badges/bg */

  /* ---------- Neutrals ---------- */
  --as-cream:       #F4F2EE;   /* Page background, alt sections */
  --as-cream-deep:  #ECE8E0;   /* Subtle alternating section */
  --as-paper:       #FFFFFF;   /* Cards, content surfaces */
  --as-ink:         #1A2530;   /* Body text — near-black, slightly cool */
  --as-ink-muted:   #4A5762;   /* Secondary text */
  --as-ink-subtle:  #7B8794;   /* Captions, helper text */
  --as-rule:        #D9D3C8;   /* Hairline borders on cream */
  --as-rule-soft:   #E8E3DA;   /* Lighter hairline */

  /* ---------- Semantic ---------- */
  --as-success:     #2E7D5F;
  --as-warning:     #C8922A;
  --as-danger:      #A8412B;
  --as-info:        #2E7D9F;

  /* ---------- Foregrounds (semantic aliases) ---------- */
  --fg-1:           var(--as-ink);
  --fg-2:           var(--as-ink-muted);
  --fg-3:           var(--as-ink-subtle);
  --fg-on-navy:     #F4F2EE;
  --fg-on-amber:    #1A2530;

  /* ---------- Backgrounds ---------- */
  --bg-page:        var(--as-cream);
  --bg-surface:     var(--as-paper);
  --bg-alt:         var(--as-cream-deep);
  --bg-navy:        var(--as-navy);

  /* ---------- Type ---------- */
  --font-display:   'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   84px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  --tracking-display: -0.015em;
  --tracking-eyebrow: 0.16em;
  --tracking-body:    0;

  /* ---------- Spacing ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:    0 1px 2px rgba(22, 62, 85, 0.06);
  --shadow-sm:    0 2px 6px rgba(22, 62, 85, 0.08);
  --shadow-md:    0 8px 24px -8px rgba(22, 62, 85, 0.18);
  --shadow-lg:    0 24px 60px -20px rgba(22, 62, 85, 0.28);
  --shadow-amber: 0 8px 22px -10px rgba(200, 146, 42, 0.55);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .as-display {
  font-family: var(--font-display);
  color: var(--as-navy);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 6vw, var(--fs-6xl)); font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, var(--fs-4xl)); font-weight: 700; }
h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--fg-1);
  line-height: var(--lh-snug);
  margin: 0;
}

.as-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--as-amber);
}

p {
  margin: 0 0 1em 0;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

p.lead {
  font-size: var(--fs-lg);
  color: var(--fg-1);
}

a {
  color: var(--as-steel);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--as-navy); text-decoration-thickness: 1.5px; }

small, .as-caption {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}

code, .as-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--as-cream-deep);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
  color: var(--as-navy-deep);
}

hr.as-rule {
  border: 0;
  height: 1px;
  background: var(--as-rule);
  margin: var(--sp-6) 0;
}