/* ============================================================
   theapslab — Colors & Type
   Interior design personal brand · Abril Pérez Sanders
   Palette is intentionally restrained: black, white, a full
   neutral grey scale, and ONE brand colour — coral #ee7063.
   ============================================================ */

/* ----- Fonts -------------------------------------------------
   Brand face: Neue Haas Grotesk Display Pro — now SELF-HOSTED
   from the user's uploaded files in fonts/. One family; weight
   carries hierarchy. NHG has no 600 — requests for 600 resolve
   to 700 (Bold) by the CSS weight-matching algorithm.
------------------------------------------------------------- */
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-Roman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-RomanItalic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NHD-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand colour : coral ---------- */
  --coral:        #ee7063;   /* the one brand colour — logo, accents, CTAs */
  --coral-700:    #d8513f;   /* pressed / hover-dark */
  --coral-600:    #e65f4f;
  --coral-500:    #ee7063;   /* base */
  --coral-300:    #f4a094;   /* hover-light / borders on coral fields */
  --coral-100:    #fbded8;   /* tint fills, hover backgrounds */
  --coral-50:     #fdf0ed;   /* faintest wash, section backgrounds */

  /* ---------- Neutrals : ink → paper ---------- */
  --black:        #111111;   /* true ink, headlines on paper */
  --grey-900:     #1c1c1b;
  --grey-800:     #2e2e2c;
  --grey-700:     #4a4a47;   /* body text */
  --grey-600:     #6b6b67;   /* secondary text */
  --grey-500:     #8d8d88;   /* muted / captions */
  --grey-400:     #b4b4af;
  --grey-300:     #d2d2cd;   /* hairline borders */
  --grey-200:     #e4e4df;   /* dividers, card borders */
  --grey-100:     #efefea;   /* subtle fills */
  --grey-50:      #f6f6f2;   /* page background, warm off-white */
  --white:        #ffffff;

  /* ---------- Semantic surface / text ---------- */
  --bg:           var(--grey-50);   /* default page — warm paper, never pure white blocks */
  --bg-paper:     #ffffff;
  --bg-ink:       var(--black);     /* dark sections */
  --bg-coral:     var(--coral);     /* coral feature sections */

  --fg:           var(--grey-900);  /* primary text */
  --fg-soft:      var(--grey-600);  /* secondary text */
  --fg-muted:     var(--grey-500);  /* captions, meta */
  --fg-onDark:    #ffffff;
  --fg-onDark-soft: rgba(255,255,255,0.66);
  --fg-onCoral:   #ffffff;

  --line:         var(--grey-200);  /* default hairline */
  --line-strong:  var(--grey-300);

  /* ---------- Type families ---------- */
  --font-sans: "Neue Haas Grotesk Display Pro",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);  /* one family, weight does the work */

  /* ---------- Type scale (1.250 major-third-ish, tuned) ---------- */
  --t-display:  clamp(3rem, 7vw, 6rem);     /* 48 → 96  hero wordmark moments */
  --t-h1:       clamp(2.4rem, 5vw, 4rem);   /* 38 → 64 */
  --t-h2:       clamp(1.9rem, 3.4vw, 2.75rem);/* 30 → 44 */
  --t-h3:       1.5rem;     /* 24 */
  --t-h4:       1.1875rem;  /* 19 */
  --t-body-lg:  1.25rem;    /* 20  lead paragraphs */
  --t-body:     1.0625rem;  /* 17  default body */
  --t-small:    0.9375rem;  /* 15 */
  --t-caption:  0.8125rem;  /* 13  meta / captions */
  --t-micro:    0.6875rem;  /* 11  eyebrow / overline */

  --lh-tight:   1.04;   /* display & big headlines */
  --lh-snug:    1.18;   /* sub-heads */
  --lh-body:    1.6;    /* paragraphs */

  --tr-tight:   -0.02em;  /* large display */
  --tr-normal:  -0.01em;
  --tr-wide:    0.18em;   /* eyebrow / overline uppercase */

  /* ---------- Spacing (4px base) ---------- */
  --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 — soft, never pill-y for cards ---------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px; --r-lg: 18px;
  --r-xl: 28px; --r-pill: 999px;

  /* ---------- Shadows — quiet, warm-grey, low spread ---------- */
  --shadow-xs: 0 1px 2px rgba(28,28,27,0.05);
  --shadow-sm: 0 2px 8px rgba(28,28,27,0.06);
  --shadow-md: 0 10px 30px rgba(28,28,27,0.08);
  --shadow-lg: 0 24px 60px rgba(28,28,27,0.12);
}

/* ============================================================
   Semantic element styles — apply with these classes/tags
   ============================================================ */

.aps-eyebrow {            /* small uppercase overline */
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--coral);
}

.aps-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  text-wrap: balance;
}

h1, .aps-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  text-wrap: balance;
}

h2, .aps-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-normal);
  color: var(--fg);
  text-wrap: balance;
}

h3, .aps-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-normal);
  color: var(--fg);
}

h4, .aps-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

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

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

.aps-small   { font-size: var(--t-small);   line-height: 1.5; color: var(--fg-soft); }
.aps-caption {
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}