/* =============================================================
   THE PEOPLE READINESS COMPANY — Colors & Type
   ============================================================= */

@font-face {
  font-family: "Eksell Display";
  src: url("fonts/EksellDisplay-Medium.woff") format("woff"),
       url("fonts/EksellDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: url("fonts/Matter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: url("fonts/Matter-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary */
  --tprc-deep:    #080C0A;   /* near-black, the dominant brand color */
  --tprc-sand:    #F5EFD8;   /* the warm cream "page" color */

  /* Secondary accents — used sparingly, never together as a rainbow */
  --tprc-yellow:  #F3ED6C;
  --tprc-purple:  #B9A1E1;
  --tprc-red:     #FF9275;   /* coral-red, warm */
  --tprc-blue:    #4EA7AC;   /* teal, the signet's accent */

  /* Tonal extensions of Deep — for hairlines, dividers, secondary text on sand */
  --tprc-deep-90: #1B1F1D;
  --tprc-deep-70: #3F4441;
  --tprc-deep-50: #6E7370;
  --tprc-deep-30: #A6AAA8;
  --tprc-deep-15: #D2D4D2;

  /* Tonal extensions of Sand — for hairlines on deep, subtle layering */
  --tprc-sand-90: #EBE5CD;
  --tprc-sand-70: #C9C3AE;
  --tprc-sand-50: #969180;
  --tprc-sand-30: #5C5A50;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg:           var(--tprc-sand);
  --bg-inverse:   var(--tprc-deep);

  --fg:           var(--tprc-deep);
  --fg-2:         var(--tprc-deep-70);   /* secondary copy */
  --fg-3:         var(--tprc-deep-50);   /* meta, captions */
  --fg-inverse:   var(--tprc-sand);
  --fg-inverse-2: var(--tprc-sand-70);

  --rule:         var(--tprc-deep);      /* hairlines on sand */
  --rule-soft:    var(--tprc-deep-15);
  --rule-inverse: var(--tprc-sand);
  --rule-inverse-soft: var(--tprc-sand-30);

  /* Accents, semantic */
  --accent:       var(--tprc-blue);      /* the signet accent — measure / data */
  --accent-warm:  var(--tprc-red);       /* signal, attention */
  --accent-soft:  var(--tprc-purple);    /* development, building */
  --accent-bright:var(--tprc-yellow);    /* highlight, readiness */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Eksell Display", "Canela Deck", "Recoleta", Georgia, serif;
  --font-sans:    "Matter", "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- TYPE SCALE ----------
     Display set is for serif headlines; Body set is Matter sans.
     Line heights are tight on display, generous on body. */
  --t-display-xl-size:   clamp(56px, 7.6vw, 128px);
  --t-display-xl-lh:     0.92;
  --t-display-xl-tracking: -0.02em;

  --t-display-l-size:    clamp(44px, 5.4vw, 88px);
  --t-display-l-lh:      0.96;
  --t-display-l-tracking:-0.015em;

  --t-display-m-size:    clamp(32px, 3.4vw, 56px);
  --t-display-m-lh:      1.02;
  --t-display-m-tracking:-0.01em;

  --t-display-s-size:    clamp(24px, 2.2vw, 36px);
  --t-display-s-lh:      1.08;
  --t-display-s-tracking:-0.005em;

  --t-body-l-size:       20px;
  --t-body-l-lh:         1.5;

  --t-body-size:         17px;
  --t-body-lh:           1.55;

  --t-body-s-size:       15px;
  --t-body-s-lh:         1.5;

  --t-meta-size:         13px;
  --t-meta-lh:           1.4;

  --t-eyebrow-size:      12px;
  --t-eyebrow-lh:        1.2;
  --t-eyebrow-tracking:  0.16em;

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

  /* ---------- RADIUS ----------
     The signet uses a soft-rounded square. Surfaces echo this restraint. */
  --radius-xs: 2px;
  --radius-s:  6px;
  --radius-m:  12px;
  --radius-l:  20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- BORDERS ---------- */
  --border-hairline: 1px solid var(--rule);
  --border-soft:     1px solid var(--rule-soft);
  --border-thick:    1.5px solid var(--rule);

  /* ---------- ELEVATION ----------
     Restrained. Brand favors flat surfaces and hairlines over shadows. */
  --shadow-1: 0 1px 0 rgba(8,12,10,0.04), 0 1px 2px rgba(8,12,10,0.06);
  --shadow-2: 0 4px 16px rgba(8,12,10,0.08);
  --shadow-3: 0 12px 40px rgba(8,12,10,0.12);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
}

/* =============================================================
   SEMANTIC TYPE PRIMITIVES
   ============================================================= */

.t-display-xl,
.t-display-l,
.t-display-m,
.t-display-s,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg);
  text-wrap: balance;
}

.t-display-xl, h1 {
  font-size: var(--t-display-xl-size);
  line-height: var(--t-display-xl-lh);
  letter-spacing: var(--t-display-xl-tracking);
  margin: 0;
}

.t-display-l {
  font-size: var(--t-display-l-size);
  line-height: var(--t-display-l-lh);
  letter-spacing: var(--t-display-l-tracking);
  margin: 0;
}

.t-display-m, h2 {
  font-size: var(--t-display-m-size);
  line-height: var(--t-display-m-lh);
  letter-spacing: var(--t-display-m-tracking);
  margin: 0;
}

.t-display-s, h3 {
  font-size: var(--t-display-s-size);
  line-height: var(--t-display-s-lh);
  letter-spacing: var(--t-display-s-tracking);
  margin: 0;
}

.t-body-l {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-l-size);
  line-height: var(--t-body-l-lh);
  color: var(--fg);
}

.t-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0;
}

.t-body-s {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-s-size);
  line-height: var(--t-body-s-lh);
  color: var(--fg);
}

.t-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  color: var(--fg-2);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Body defaults */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Inverse surface (Deep background) */
.surface-deep {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.surface-deep .t-eyebrow,
.surface-deep .t-meta { color: var(--fg-inverse-2); }
.surface-deep h1, .surface-deep h2, .surface-deep h3,
.surface-deep .t-display-xl, .surface-deep .t-display-l,
.surface-deep .t-display-m, .surface-deep .t-display-s,
.surface-deep p, .surface-deep .t-body,
.surface-deep .t-body-l, .surface-deep .t-body-s { color: var(--fg-inverse); }