@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

/* ============================================================
   jamilla.studio — Foundations: Color & Type
   Editorial · monochrome warmth · filmic photography · quiet luxury
   Near-black ink on warm cream/greige; warmth carried by imagery.
   Headlines: Ogg, ALL CAPS. Body & labels: neutral grotesque.
   ============================================================ */

/* ---- Webfonts -------------------------------------------------- */
/* Display: uploaded Ogg (Light) — the signature display face */
@font-face {
  font-family: "Ogg";
  src: url("fonts/Ogg_Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Secondary display / fallback: uploaded PP Editorial New (Ultralight) */
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Ultralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Body / labels: Hanken Grotesk (neutral grotesque) from Google Fonts.
   Import in the HTML <head> alongside this file:
   <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
*/

:root {
  /* ============================================================
     COLOR — editorial palette
     Near-monochrome: warm ink on cream/greige. Warmth = photography.
     ============================================================ */

  /* Ink & dark anchors */
  --ink:           #1c1814;  /* primary near-black warm ink, text + hero base */
  --cocoa:         #24201a;  /* deep warm cocoa — dark sections, footer */
  --ink-2:         #45403a;  /* secondary text */
  --ink-3:         #6f675c;  /* muted text / captions */

  /* Warm light grounds */
  --cream:         #f6f3ea;  /* primary page background */
  --bone:          #efebe0;  /* alternate light section */
  --greige:        #e6e2d7;  /* deeper greige section */
  --white-soft:    #fbf9f2;  /* softest surface */

  /* Restrained warm accents (used sparingly — the photos do the rest) */
  --clay:          #8a6f57;  /* muted warm taupe — links, small accents */
  --clay-deep:     #6f5743;  /* hover / pressed */
  --sand-warm:     #b0906e;  /* lighter warm accent on dark */

  /* ---- Canonical name aliases (remapped to the editorial scheme so all
          existing components shift at once) ---- */
  --nacht:         var(--ink);
  --woud:          var(--cocoa);
  --terra:         var(--clay);
  --amber:         var(--sand-warm);
  --olijfgoud:     #877a66;          /* warm muted — meta on dark, fine marks */
  --zand:          var(--greige);
  --linnen:        var(--bone);
  --ivoor:         var(--cream);

  /* Legacy aliases (older preview cards) */
  --espresso:      var(--ink);
  --bark:          var(--cocoa);
  --cacao:         var(--clay-deep);
  --walnut:        var(--ink-2);
  --terracotta:    var(--clay);
  --terracotta-deep:var(--clay-deep);
  --clay-light:    var(--sand-warm);
  --sand:          var(--greige);
  --gold:          var(--clay);
  --gold-soft:     var(--sand-warm);
  --beige:         var(--greige);
  --linen:         var(--bone);
  --paper:         var(--cream);
  --paper-warm:    var(--bone);

  /* ============================================================
     SEMANTIC — surfaces, ink, lines
     ============================================================ */
  --bg:            var(--cream);        /* default page background */
  --bg-warm:       var(--bone);         /* light alternate section */
  --bg-greige:     var(--greige);       /* deeper light section */
  --bg-dark:       var(--ink);          /* dark / filmic / featured */
  --bg-forest:     var(--cocoa);        /* footer / deep panels */
  --bg-clay:       var(--ink);          /* feature field (now ink, not clay) */
  --bg-contact:    var(--greige);       /* contact section */

  --surface:       var(--white-soft);   /* card surface on light bg */
  --surface-dark:  var(--cocoa);        /* card surface on dark bg */

  --fg:            var(--ink);          /* primary ink on light */
  --fg-2:          var(--ink-2);        /* secondary ink */
  --fg-3:          var(--ink-3);        /* muted / captions */
  --fg-on-dark:    var(--cream);        /* primary text on dark */
  --fg-on-dark-2:  #c9c0b0;             /* secondary text on dark */

  --accent:        var(--clay);
  --accent-deep:   var(--clay-deep);
  --accent-amber:  var(--sand-warm);
  --accent-gold:   var(--clay);

  /* Lines — thin, near-black editorial rules (the signature divider) */
  --rule:          #1c1814;                 /* full-width hairline rule */
  --line:          rgba(28, 24, 20, 0.85);  /* strong hairline */
  --line-soft:     rgba(28, 24, 20, 0.16);  /* subtle hairline */
  --line-on-dark:  rgba(246, 243, 234, 0.22);

  /* Shadows — almost none. Editorial separation comes from space + rules. */
  --shadow-sm:  none;
  --shadow-md:  0 8px 30px rgba(28,24,20,0.06);
  --shadow-lg:  0 20px 60px rgba(28,24,20,0.10);

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-display: "Ogg", "PP Editorial New", "Cormorant Garamond", Georgia, serif;
  --font-serif:   "Ogg", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-button:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — editorial. Display set ALL CAPS. Base 17px body. */
  --fs-display: 104px;  /* hero display */
  --fs-h1:      72px;
  --fs-h2:      52px;
  --fs-h3:      30px;
  --fs-h4:      23px;
  --fs-quote:   40px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-label:   13px;   /* uppercase grotesque labels */

  --lh-tight:   0.96; /* @kind other */
  --lh-snug:    1.02; /* @kind other */
  --lh-body:    1.62; /* @kind other */

  --ls-label:   0.14em;  /* tracking for grotesque caps labels */
  --ls-display: 0.005em; /* near-zero; Ogg caps sit tight */
  --ls-tight:   0em;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Display & headings: Ogg, UPPERCASE. Labels & body: grotesque.
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.0;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--fg);
}
.t-h4 {
  /* small section label — grotesque caps */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.t-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-quote);
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--fg);
}
.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.t-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-3);
}
.t-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg);
}

/* Full-width editorial divider rule */
.t-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  width: 100%;
  margin: 0;
}