/* =========================================================================
   LECTURE LOUNGE — Colours & Type
   "Curiosity, with a twist."
   Brand Identity v5 · Amsterdam · Den Haag · Berlin
   =========================================================================
   Import this file to inherit the full token system. Fonts are loaded from
   ./fonts (TTF). All values are sourced from BrandGuidelines_v5.
   ========================================================================= */

/* Playfair Display — serif display / tagline / punch headlines.
   Canonical serif (confirmed by brand owner); hosted locally from ./fonts. */
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}

/* ----------------------------- FONT FACES ------------------------------ */

/* Public Sans — the wordmark + UI structural type */
@font-face {
  font-family: "Public Sans";
  src: url("./fonts/PublicSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("./fonts/PublicSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("./fonts/PublicSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("./fonts/PublicSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* DM Sans — body + labels */
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* (Serif display is Playfair Display — see @import at the top of this file.
   Cormorant Garamond TTFs remain in ./fonts as a fallback option.) */

/* ------------------------------- TOKENS -------------------------------- */
:root {
  /* --- Core palette (the only five colours that exist) --- */
  --ink:    #111110;  /* primary dark   — backgrounds, reversed wordmark */
  --chalk:  #F5F4F0;  /* primary light  — off-white surfaces            */
  --stone:  #D3D1C7;  /* mid-tone       — dividers, secondary text       */
  --smoke:  #888780;  /* tertiary       — metadata, labels, dates        */
  --cobalt: #1275EA;  /* accent         — once per composition, structural */

  /* --- Tints derived from the core (use sparingly, never invent hues) --- */
  --ink-90:   #1c1c1a;  /* raised ink surface on near-black              */
  --ink-80:   #2a2a27;  /* hairline borders on ink                       */
  --chalk-dk: #ECEAE2;  /* sunken chalk surface / hover on light         */
  --stone-dk: #BDBAAE;  /* stronger divider on light                     */
  --cobalt-dk:#0E5EC0;  /* cobalt pressed state                          */

  /* --- Semantic foreground (on light / chalk) --- */
  --fg-1: var(--ink);    /* primary text   */
  --fg-2: #46453F;       /* secondary text */
  --fg-3: var(--smoke);  /* tertiary / meta */

  /* --- Semantic foreground (on ink / dark) --- */
  --fg-on-ink-1: var(--chalk);
  --fg-on-ink-2: var(--stone);
  --fg-on-ink-3: var(--smoke);

  /* --- Surfaces --- */
  --surface:      var(--chalk);
  --surface-sunk: var(--chalk-dk);
  --surface-ink:  var(--ink);
  --divider:      var(--stone);
  --divider-ink:  var(--ink-80);

  /* --- Image treatment --- */
  --ink-overlay: rgba(17, 17, 16, 0.55); /* full-bleed image overlay      */
  --photo-desaturate: saturate(0.7);     /* 30% desaturation              */
  --grain-opacity: 0.18;                 /* grain layer, overlay blend     */

  /* --- Type families --- */
  --font-wordmark: "Public Sans", system-ui, sans-serif; /* wordmark/UI   */
  --font-sans:     "DM Sans", system-ui, sans-serif;      /* body/labels   */
  --font-serif:    "Playfair Display", Georgia, serif;    /* tagline/punch */

  /* --- Type scale (px @ desktop) --- */
  --t-wordmark:   clamp(22px, 4vw, 64px);
  --t-display:    clamp(40px, 6vw, 88px);  /* serif punch headline         */
  --t-h1:         44px;
  --t-h2:         32px;
  --t-h3:         22px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-label:      11px;

  /* --- Letter-spacing --- */
  --ls-wordmark: 0.04em;
  --ls-label:    0.14em;  /* uppercase labels / accent labels             */
  --ls-tight:   -0.01em;

  /* --- Line-height --- */
  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-body:   1.55;

  /* --- Spacing scale (8pt base; whitespace is the design) --- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 16px;  --sp-4: 24px;
  --sp-5: 40px;  --sp-6: 64px;  --sp-7: 96px;  --sp-8: 144px;

  /* --- Radii (near-zero; the system is rectilinear) --- */
  --radius-0: 0px;
  --radius-1: 2px;   /* the only soft corner permitted on small controls   */
  --radius-btn: 6px; /* buttons — a slightly softened corner               */
  --radius-pill: 999px;

  /* --- Borders --- */
  --border-hair: 1px solid var(--divider);
  --border-hair-ink: 1px solid var(--divider-ink);
  --border-rule: 2px solid var(--ink);

  /* --- Motion (the cobalt rule reveal — luxurious, eased, fluid) --- */
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); /* the signature easing      */
  --dur-wipe: 1200ms;    /* scaleX(0→1) glide-in — the canonical motion      */
  --dur-fast: 200ms;
  --dur-base: 320ms;
}

/* --------------------------- SEMANTIC TYPE ----------------------------- */
/* Apply these classes/elements for consistent specimens across the system. */

.ll-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.ll-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;          /* never bold */
  letter-spacing: 0;
  color: var(--fg-2);
}

.ll-display {            /* serif punch headline */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.ll-h1 { font-family: var(--font-wordmark); font-weight: 600; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.ll-h2 { font-family: var(--font-wordmark); font-weight: 600; font-size: var(--t-h2); line-height: var(--lh-snug); }
.ll-h3 { font-family: var(--font-wordmark); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-snug); }

.ll-body    { font-family: var(--font-sans); font-weight: 300; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); }
.ll-body-lg { font-family: var(--font-sans); font-weight: 300; font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--fg-2); }
.ll-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-sm); line-height: var(--lh-body); color: var(--fg-3); }

.ll-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
}

/* The cobalt accent label — the only place cobalt touches type */
.ll-label--cobalt { color: var(--cobalt); }

/* The cobalt rule wipe — structural divider that animates in */
.ll-rule {
  display: block;
  height: 2px;
  background: var(--cobalt);
  transform: scaleX(1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .ll-rule--animate {
    animation: ll-rule-wipe var(--dur-wipe) var(--ease-glide) both;
  }
}
@keyframes ll-rule-wipe {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}