/* ============================================================
   Quack Studio — Design Tokens
   Source: Portfolio.fig (Portfolio-Kayliegh, Kayliegh Boyen)
   ============================================================ */

/* Fonts ---------------------------------------------------------
   The portfolio uses Manrope (Regular + Bold/SemiBold).
   Loaded from Google Fonts. If self-hosting, drop the .woff2
   files in /fonts and switch to local() in @font-face.
---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* ---------- Color: brand ---------- */
  --color-ink:        #020403;   /* near-black headlines on light bg (rgb 2,4,3) */
  --color-ink-soft:   #000000;   /* body copy on light bg                       */
  --color-paper:      #FDFAFF;   /* primary off-white surface (rgb 253,250,255) */
  --color-grape:      #2C2154;   /* deep indigo / "grape" — pill labels & logo  */
  --color-grape-ink:  #1A1339;   /* a darker grape for hovers / focus rings     */
  --color-grape-soft: #463A82;   /* lighter grape for tertiary accents          */

  /* ---------- Color: cover gradient (rendered as bitmap in figma) ---------- */
  --color-cover-start: #000000;     /* upper-left black */
  --color-cover-mid:   #1A0AE5;     /* mid royal blue   */
  --color-cover-end:   #B6A4FF;     /* warm lavender    */
  --bg-cover-gradient:
    radial-gradient(120% 100% at 100% 100%,
      var(--color-cover-end) 0%,
      var(--color-cover-mid) 45%,
      var(--color-cover-start) 100%);

  /* ---------- Color: semantic ---------- */
  --fg-1: var(--color-ink);
  --fg-2: var(--color-ink-soft);
  --fg-on-dark: var(--color-paper);
  --bg-1: var(--color-paper);
  --bg-2: #F4EFFA;                  /* soft tinted surface (derived) */
  --bg-dark: var(--color-grape);
  --accent: var(--color-grape);

  --border-subtle: rgba(2, 4, 3, 0.08);
  --shadow-soft: 0 24px 60px -28px rgba(44, 33, 84, 0.18);

  /* ---------- Type: family ---------- */
  --font-sans: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type: scale (1920×1080 deck-native; scales down for web) ---------- */
  --fs-display:   78px;   /* hero headlines     — Manrope 700 */
  --fs-h1:        56px;   /* large headlines    — Manrope 700 */
  --fs-h2:        40px;   /* section heads      — Manrope 700 */
  --fs-h3:        32px;   /* sub-heads, body XL — Manrope 700 / 400 */
  --fs-body:      24px;   /* body, list text    — Manrope 400 */
  --fs-small:     18px;   /* caption, meta      — Manrope 500 */
  --fs-pill:      32px;   /* pill label text    — Manrope 700 */

  /* ---------- Type: line-height + tracking ---------- */
  --lh-tight: 1.00;       /* display / headline (figma uses 100%) */
  --lh-snug:  1.20;
  --lh-body:  1.50;       /* body lists (Treepack uses 48/32 ≈ 1.5) */
  --tracking-tight: -0.01em;

  /* ---------- Shape & spacing ---------- */
  --radius-pill:   80px;  /* pill / label radius (always >= half height) */
  --radius-card:   80px;  /* image cards have the same enormous radius   */
  --radius-md:     24px;  /* mid-size container radius (derived)         */
  --radius-sm:     12px;

  --space-page:    120px; /* deck page padding (deck-native) */
  --space-block:    48px; /* gap between major blocks        */
  --space-stack:    24px; /* gap inside a block / between lines */
  --space-inline:   12px;

  /* ---------- Pill chrome (the signature element) ---------- */
  --pill-h: 82px;
  --pill-px: 44px;        /* horizontal padding inside the pill   */
  --pill-bg: var(--color-grape);
  --pill-fg: var(--color-paper);
}

/* ============================================================
   Semantic typography classes
   ============================================================ */
.qs-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
}
.qs-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.qs-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.qs-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.qs-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.qs-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.qs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pill-px);
  min-height: var(--pill-h);
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-pill);
  line-height: var(--lh-tight);
  text-decoration: none;
}
.qs-pill--underline { text-decoration: underline; }

/* Cover / hero on-dark variants */
.qs-display--on-dark, .qs-h1--on-dark, .qs-h2--on-dark, .qs-h3--on-dark,
.qs-body--on-dark, .qs-small--on-dark { color: var(--fg-on-dark); }