/* ============================================================
   SORP Design System — Colors & Type
   ============================================================ */

@font-face {
  font-family: "Manrope";
  src: url("./fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Fallback for body copy when a more "editorial" feel is needed.
   Pulled from Google Fonts since no second face was provided.
   FLAGGED: substitution — see README for note. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap");

:root {
  /* ----------------------------------------------------------
     COLOR — Brand
     The brand identity is built around a single high-saturation
     red drawn from the logo mark, paired with a near-black ink
     and warm off-whites. No secondary brand hues — accent is the
     only colored element on most surfaces.
     ---------------------------------------------------------- */
  --sorp-red:           #D63D4A;   /* primary accent, from logo mark */
  --sorp-red-deep:      #B02A36;   /* hover / pressed state */
  --sorp-red-soft:      #F4D7DA;   /* tints, badges, hairline tabs */
  --sorp-red-wash:      #FAEEEF;   /* page-section wash */

  --sorp-ink:           #14171C;   /* primary text + dark surfaces */
  --sorp-ink-2:         #232830;   /* secondary dark surface */
  --sorp-ink-3:         #3A4049;   /* dark borders */

  /* ----------------------------------------------------------
     COLOR — Neutrals (warm, not pure grey)
     ---------------------------------------------------------- */
  --neutral-0:          #FFFFFF;
  --neutral-50:         #FAF8F5;   /* page bg */
  --neutral-100:        #F2EFEA;   /* card-on-page subtle */
  --neutral-200:        #E6E2DB;   /* hairline borders */
  --neutral-300:        #C9C3B9;   /* disabled */
  --neutral-500:        #7A7468;   /* muted text */
  --neutral-700:        #4A4640;
  --neutral-900:        #14171C;

  /* ----------------------------------------------------------
     COLOR — Semantic foreground / background tokens
     ---------------------------------------------------------- */
  --fg-1:               var(--sorp-ink);     /* primary text */
  --fg-2:               var(--neutral-700);  /* secondary text */
  --fg-3:               var(--neutral-500);  /* muted / captions */
  --fg-disabled:        var(--neutral-300);
  --fg-on-dark:         var(--neutral-0);
  --fg-on-dark-2:       #B8BAC0;
  --fg-accent:          var(--sorp-red);

  --bg-page:            var(--neutral-50);
  --bg-surface:         var(--neutral-0);
  --bg-surface-alt:     var(--neutral-100);
  --bg-dark:            var(--sorp-ink);
  --bg-dark-2:          var(--sorp-ink-2);
  --bg-accent:          var(--sorp-red);
  --bg-accent-soft:     var(--sorp-red-wash);

  --border-subtle:      var(--neutral-200);
  --border-default:     #D8D2C7;
  --border-strong:      var(--neutral-700);
  --border-on-dark:     rgba(255, 255, 255, 0.10);

  /* status — consulting context, used sparingly */
  --status-success:     #2F7D5B;
  --status-warning:     #C77A1F;
  --status-danger:      var(--sorp-red);
  --status-info:        #2C5C8C;

  /* ----------------------------------------------------------
     TYPE — families
     Manrope is the ONE face. Used across UI, marketing, body,
     numerics and display. Variable weight 200–800.
     ---------------------------------------------------------- */
  --font-sans:          "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:       "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-serif:         "Cormorant Garamond", "Times New Roman", Georgia, serif; /* editorial accents only */
  --font-mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE — weights */
  --w-light:            300;
  --w-regular:          400;
  --w-medium:           500;
  --w-semibold:         600;
  --w-bold:             700;
  --w-extrabold:        800;

  /* TYPE — scale (px-anchored, harmonious) */
  --t-display-xl:       72px;
  --t-display-l:        56px;
  --t-display-m:        44px;
  --t-h1:               36px;
  --t-h2:               28px;
  --t-h3:               22px;
  --t-h4:               18px;
  --t-body-l:           18px;
  --t-body:             16px;
  --t-body-s:           14px;
  --t-caption:          13px;
  --t-micro:            11px;

  /* TYPE — leading & tracking */
  --lh-tight:           1.05;
  --lh-snug:            1.20;
  --lh-base:            1.45;
  --lh-loose:           1.65;

  --tr-tighter:         -0.03em;
  --tr-tight:           -0.015em;
  --tr-normal:          0;
  --tr-wide:            0.04em;
  --tr-wider:           0.10em;

  /* ----------------------------------------------------------
     SPACING — 4px base, named for intent
     ---------------------------------------------------------- */
  --sp-0:               0;
  --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;
  --sp-32:              128px;

  /* ----------------------------------------------------------
     RADII — modest. Cards 12–16px, controls 8–10px, pills 999.
     ---------------------------------------------------------- */
  --r-xs:               4px;
  --r-sm:               8px;
  --r-md:               12px;
  --r-lg:               16px;
  --r-xl:               24px;
  --r-pill:             999px;

  /* ----------------------------------------------------------
     SHADOWS — restrained. Used on lifted cards and floating UI.
     ---------------------------------------------------------- */
  --shadow-xs:          0 1px 2px rgba(20, 23, 28, 0.05);
  --shadow-sm:          0 2px 6px rgba(20, 23, 28, 0.06), 0 1px 2px rgba(20, 23, 28, 0.04);
  --shadow-md:          0 8px 20px rgba(20, 23, 28, 0.08), 0 2px 6px rgba(20, 23, 28, 0.05);
  --shadow-lg:          0 20px 48px rgba(20, 23, 28, 0.12), 0 4px 10px rgba(20, 23, 28, 0.06);
  --shadow-accent:      0 8px 24px rgba(214, 61, 74, 0.30);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-w:        1280px;
  --container-px:       32px;
  --grid-gap:           24px;

  /* motion */
  --ease-out:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:           120ms;
  --dur-base:           220ms;
  --dur-slow:           420ms;
}

/* ============================================================
   SEMANTIC TYPE PRESETS
   Apply directly with a class, or @extend via your own selectors.
   ============================================================ */

.t-display-xl, .h-display-xl {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
  color: var(--fg-1);
}
.t-display-l {
  font-family: var(--font-display);
  font-size: var(--t-display-l);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.t-display-m {
  font-family: var(--font-display);
  font-size: var(--t-display-m);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
h1, .t-h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  line-height: var(--lh-base);
  color: var(--fg-1);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  line-height: 1;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-accent);
}
p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-base);
  color: var(--fg-1);
}
.t-body-l {
  font-family: var(--font-sans);
  font-size: var(--t-body-l);
  font-weight: var(--w-regular);
  line-height: var(--lh-base);
  color: var(--fg-1);
}
.t-body-s, small {
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  font-weight: var(--w-regular);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  line-height: var(--lh-base);
  color: var(--fg-3);
}
.t-micro {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-numeric {
  font-family: var(--font-display);
  font-size: var(--t-display-l);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
code, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-s);
}
.t-editorial {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* ============================================================
   GLOBAL RESET-LITE — opt-in by adding `class="sorp"` on <html>
   ============================================================ */
.sorp {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}