/* ============================================================
   RESURGENCIA — Colors & Type Foundations
   Earthy, editorial, calm. Arch / portal motif.
   Load this file, then use the CSS variables below.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-Xlight.ttf');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-Light.ttf');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-Italic.ttf');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-Medium.ttf');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-MediumItalic.ttf');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-Bold.ttf');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-Xbold.ttf');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Riccione';src:url('../fonts/RiccioneSerial-Heavy.ttf');font-weight:900;font-style:normal;font-display:swap}

@font-face{font-family:'FK Display';src:url('../fonts/FKDisplay-Regular.otf');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-Variable.ttf');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Compendium';src:url('../fonts/Compendium-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* ---------- BRAND PALETTE (exact, sampled) ---------- */
  --forest:      #003329;  /* primary brand color — deep evergreen */
  --espresso:    #342b21;  /* warm dark — earth, bark */
  --ink:         #181918;  /* near-black, max contrast text */
  --sage:        #c4dccb;  /* soft mint green */
  --blue:        #b0c9d1;  /* pale glacial blue */
  --sand:        #e4e4ce;  /* warm oat / cream */
  --white:       #ffffff;

  /* ---------- DERIVED TINTS / SHADES (oklch-harmonized) ---------- */
  --forest-900:  #00271f;
  --forest-700:  #003329;  /* = brand forest */
  --forest-500:  #1c5043;
  --forest-300:  #6f9085;
  --sage-100:    #eef5f0;  /* lightest sage wash */
  --sage-200:    #dcebe1;
  --sage-400:    #c4dccb;  /* = brand sage */
  --blue-200:    #d6e4e8;
  --blue-400:    #b0c9d1;  /* = brand blue */
  --sand-100:    #f3f2e7;  /* paper / lightest oat */
  --sand-200:    #ecebda;
  --sand-400:    #e4e4ce;  /* = brand sand */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:          var(--sand-100);   /* default page — warm paper */
  --bg-alt:      var(--white);      /* cards / raised surfaces */
  --bg-invert:   var(--forest);     /* dark sections */
  --bg-muted:    var(--sage-100);   /* quiet fills */

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg1:         var(--forest);     /* primary text on light */
  --fg2:         #4a5b54;           /* secondary / muted text */
  --fg3:         #8a978f;           /* tertiary / captions, placeholders */
  --fg-invert:   var(--sand-100);   /* primary text on dark */
  --fg-invert-2: #9db5ab;           /* muted text on dark */

  /* ---------- LINES & BORDERS ---------- */
  --line:        #d7d6c2;           /* hairline on paper */
  --line-strong: #b9b8a2;
  --line-invert: rgba(228,228,206,.18);

  /* ---------- ACCENT / INTERACTIVE ---------- */
  --accent:        var(--forest);
  --accent-hover:  var(--forest-900);
  --accent-soft:   var(--sage-400);
  --focus-ring:    #1c5043;

  /* ---------- SEMANTIC STATUS (kept earthy) ---------- */
  --positive:    #2f6d4f;
  --notice:      #9a7b3f;
  --critical:    #9c4b34;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'FK Display','Riccione',Georgia,serif; /* geometric display = wordmark voice */
  --font-serif:   'Riccione',Georgia,'Times New Roman',serif; /* editorial headlines */
  --font-sans:    'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; /* body + UI */
  --font-script:  'Compendium','Snell Roundhand',cursive; /* decorative accent only */
  --font-mono:    'SFMono-Regular',ui-monospace,'Menlo',monospace;

  /* ---------- TYPE SCALE (fluid-ready static px) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  /* ---------- WEIGHTS ---------- */
  --w-light: 300;     /* @kind font */
  --w-regular: 400;   /* @kind font */
  --w-medium: 500;    /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold: 700;      /* @kind font */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight: 1.02;     /* @kind font */
  --lh-snug: 1.12;      /* @kind font */
  --lh-normal: 1.5;     /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */

  /* ---------- TRACKING ---------- */
  --track-tight: -0.02em;  /* @kind font */
  --track-normal: 0;       /* @kind font */
  --track-wide: 0.04em;    /* @kind font */
  --track-caps: 0.16em;    /* @kind font */ /* for eyebrows / overlines */

  /* ---------- RADII (arch-influenced; generous) ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  /* the signature arch / portal top */
  --r-arch: 999px 999px 0 0;  /* @kind radius */
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---------- SHADOWS (soft, low, earthy — never harsh black) ---------- */
  --shadow-sm: 0 1px 2px rgba(0,51,41,.06);
  --shadow-md: 0 4px 16px rgba(0,51,41,.08);
  --shadow-lg: 0 18px 48px rgba(0,51,41,.12);
  --shadow-focus: 0 0 0 3px rgba(28,80,67,.35);

  /* ---------- MOTION (timing tokens; grouped with scale) ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);        /* @kind spacing */
  --ease-inout: cubic-bezier(.65,.05,.36,1);  /* @kind spacing */
  --dur-fast: 140ms;  /* @kind spacing */
  --dur: 240ms;       /* @kind spacing */
  --dur-slow: 480ms;  /* @kind spacing */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */
.display-1{font-family:var(--font-serif);font-weight:var(--w-light);font-size:var(--text-6xl);line-height:var(--lh-tight);letter-spacing:var(--track-tight);color:var(--fg1)}
.display-2{font-family:var(--font-serif);font-weight:var(--w-light);font-size:var(--text-5xl);line-height:var(--lh-tight);letter-spacing:var(--track-tight);color:var(--fg1)}

.h1{font-family:var(--font-serif);font-weight:var(--w-regular);font-size:var(--text-4xl);line-height:var(--lh-snug);letter-spacing:var(--track-tight);color:var(--fg1)}
.h2{font-family:var(--font-serif);font-weight:var(--w-regular);font-size:var(--text-3xl);line-height:var(--lh-snug);letter-spacing:var(--track-tight);color:var(--fg1)}
.h3{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--text-2xl);line-height:1.15;letter-spacing:var(--track-tight);color:var(--fg1)}
.h4{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--text-xl);line-height:1.2;letter-spacing:var(--track-tight);color:var(--fg1)}
.h5{font-family:var(--font-sans);font-weight:var(--w-semibold);font-size:var(--text-lg);line-height:1.3;color:var(--fg1)}

.lead{font-family:var(--font-sans);font-weight:var(--w-regular);font-size:var(--text-md);line-height:var(--lh-relaxed);color:var(--fg2)}
.body{font-family:var(--font-sans);font-weight:var(--w-regular);font-size:var(--text-base);line-height:var(--lh-normal);color:var(--fg1)}
.body-sm{font-family:var(--font-sans);font-weight:var(--w-regular);font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--fg2)}
.caption{font-family:var(--font-sans);font-weight:var(--w-regular);font-size:var(--text-xs);line-height:1.4;color:var(--fg3)}

/* Eyebrow / overline — small caps, wide tracking. Core brand device. */
.eyebrow{font-family:var(--font-sans);font-weight:var(--w-semibold);font-size:var(--text-xs);line-height:1;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fg2)}

/* Script accent — sparingly, for a single emotive word */
.script{font-family:var(--font-script);font-weight:var(--w-regular);font-size:var(--text-3xl);line-height:1.1;color:var(--fg1)}

.mono{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:var(--track-normal);color:var(--fg2)}