/* ════════════════════════════════════════════════════════════════
   The Lasting Hours — Design System (compilé pour WordPress)
   Source : _design-system-officiel/ — NE PAS éditer à la main.
   Régénéré par câblage Claude Code. Ordre = styles.css officiel.
   ════════════════════════════════════════════════════════════════ */

/* ─────────── tokens/fonts.css (chemins .otf réécrits ./fonts/) ─────────── */
/* ── The Lasting Hours, Webfonts ──────────────────────────────
   Three-role brand type system:
   · Branch       , display & hero / wordmark (UPPERCASE, reserved).
                     Licensed .otf on disk.
   · EB Garamond  , text & headings, editorial prose, quotes.
   · Josefin Sans , labels, eyebrows, buttons, UI.

   The script face below (Mrs Saint Delafield) is NOT a fourth type role , 
   it exists only as the logo lockup's "the" flourish (the official logo is
   shipped as SVG/PNG in assets/logo/). Never set text in it.

   NOTE: the Branch weights bundled here render letters A–Z correctly, but
   some punctuation (e.g. the em dash) shows a placeholder glyph. Keep display
   headlines to words; set em dashes in EB Garamond body. Replace with the full
   licensed Branch family before production. The other faces are open-source
   (Google Fonts).
--------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Josefin+Sans:wght@300;400;500;600&family=Mrs+Saint+Delafield&display=swap');

@font-face {
  font-family: 'Branch';
  font-weight: 300;
  font-style: normal;
  src: url('fonts/TheSeasons-Light.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Branch';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/TheSeasons-Regular.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Branch';
  font-weight: 400;
  font-style: italic;
  src: url('fonts/TheSeasons-Italic.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Branch';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/TheSeasons-Bold.otf') format('opentype');
  font-display: swap;
}

/* ─────────── tokens/colors.css ─────────── */
/* ════════════════════════════════════════════════════════════════
   COLOUR, The Lasting Hours
   Warm "quiet luxury": Parisian golden hour. Limestone cream paper
   (the logo's own field is the default canvas), brass & gold (the
   sun-ring palette), one deep warm-brown ink (never pure black),
   faint dawn rose, warm-kept semantics, plus Paris zinc, the rare
   COOL counterpoint used only in structural touches. No bordeaux,
   no purple, no Provence-warm drift.

   This file ships the canonical brand scale + semantic aliases, then a
   LEGACY COMPATIBILITY layer so older component/kit code keeps resolving.
   New work: prefer the brand scale and the semantic aliases.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brown ink (warm neutral / text), never pure black.
     ONE dark brown only (Espresso retired). Text hierarchy is three
     useful tiers: 900 primary · 600/500 secondary · 400/300 muted. ── */
  --brown-900: #2D2823;   /* PRIMARY ink, body text, dark surfaces, logo brown */
  --brown-800: #3A332C;   /* interactive only, control hover */
  --brown-700: #4A4239;   /* strong heading on cream */
  --brown-600: #5B5346;   /* secondary text */
  --brown-500: #6B6456;   /* secondary text / caption */
  --brown-400: #8A8478;   /* muted / disabled */
  --brown-300: #A9A294;   /* placeholder */

  /* ── Cream / limestone (surfaces) ── */
  --cream-50:  #FBF9F4;   /* lightest card / panel */
  --cream-100: #F7F3EB;
  --cream-200: #F3EFE8;   /* app background, the logo field */
  --cream-300: #ECE6DA;   /* limestone, alt section bg */
  --cream-400: #E2DBCD;   /* hairline borders, dividers */
  --cream-500: #D8CFBE;   /* stronger border / inset */

  /* ── Brass & gold (accent, golden hour / the sun ring) ── */
  --gold-300:  #E4CDA2;   /* pale gold, ring at horizon, soft glow */
  --gold-400:  #D2B477;
  --gold-500:  #C6A862;   /* gold, highlights, sun-ring zenith */
  --brass-600: #A8854A;   /* brass, primary accent, fine rules, links */
  --brass-700: #8A6C3A;   /* deep brass, hover / pressed accent */

  /* ── Soft warm accents (use sparingly) ── */
  --dawn-300:  #E7CBB8;   /* dawn blush, faint washes / soft light on dark */
  --dawn-500:  #CDA892;   /* muted dawn rose */

  /* ── Paris zinc (the COOL counterpoint, STRUCTURAL TOUCHES ONLY) ──
     The cold grey-blue "Paris signal": zinc rooftops, wrought iron.
     Rare but present, the cool note that keeps the warm palette from
     sliding to Provence and adds the chic. Use for fine rules, icons,
     small separators, footer details, ring accents.
     NEVER as a background fill. ── */
  --zinc-400: #8B95A1;    /* the signal, cool grey-blue */
  --zinc-900: #2C3035;    /* charcoal, cool dark detail */

  /* ── Semantic (muted, kept warm) ── */
  --olive-600:      #6E7355;  /* success / confirmed */
  --olive-100:      #E8E8DA;
  --terracotta-600: #B05A45;  /* error / attention */
  --terracotta-100: #F2DFD8;
  --amber-600:      #B58A3E;  /* warning / pending */
  --amber-100:      #F1E6CE;

  /* ════════════════════════════════════════════════════════════
     SEMANTIC ALIASES, prefer these in new work
     ════════════════════════════════════════════════════════════ */
  /* Text */
  --text-primary:     var(--brown-900);
  --text-secondary:   var(--brown-500);
  --text-muted:       var(--brown-400);
  --text-placeholder: var(--brown-300);
  --text-on-dark:     var(--cream-100);
  --text-accent:      var(--brass-600);
  --text-link:        var(--brass-600);
  --text-link-hover:  var(--brass-700);

  /* Surfaces */
  --surface-page:    var(--cream-200);
  --surface-raised:  var(--cream-50);
  --surface-sunken:  var(--cream-300);
  --surface-card:    var(--cream-50);
  --surface-dark:    var(--brown-900);
  --surface-inverse: var(--brown-900);

  /* Lines & borders */
  --border-hairline: var(--cream-400);
  --border-strong:   var(--cream-500);
  --border-accent:   var(--brass-600);
  --rule-gold:       var(--brass-600);
  /* Cool structural details (Paris zinc), hairlines, icons, footer rules. Never fills. */
  --border-cool:     var(--zinc-400);
  --detail-cool:     var(--zinc-400);
  --ink-cool:        var(--zinc-900);

  /* Interactive (brand brown as primary control) */
  --control-fill:        var(--brown-900);
  --control-fill-hover:  var(--brown-800);
  --control-fill-active: var(--brown-900);
  --control-on-fill:     var(--cream-100);
  --accent-fill:         var(--brass-600);
  --accent-fill-hover:   var(--brass-700);

  /* Focus */
  --focus-ring: var(--brass-600);

  /* ════════════════════════════════════════════════════════════
     LEGACY COMPATIBILITY, older component/kit variable names
     remapped onto the golden-hour brand. Do not use in new work.
     ════════════════════════════════════════════════════════════ */
  --ivory:        var(--cream-200);
  --ivory-deep:   var(--cream-300);
  --porcelain:    var(--cream-50);
  --white-warm:   var(--cream-50);

  --ink:          var(--brown-900);
  --ink-soft:     var(--brown-700);
  --ink-mute:     var(--brown-500);
  --ink-faint:    var(--brown-400);

  --line:         var(--cream-400);
  --line-soft:    var(--cream-300);
  --line-strong:  var(--cream-500);

  --brass:        var(--brass-600);
  --brass-deep:   var(--brass-700);
  --brass-soft:   var(--gold-400);
  --brass-wash:   var(--amber-100);

  /* bordeaux → brown-900 dark ground (brand has no bordeaux) */
  --bordeaux:      var(--brown-900);
  --bordeaux-soft: var(--brown-800);
  --bordeaux-wash: var(--cream-300);

  /* blush → dawn rose */
  --blush:        var(--dawn-300);
  --blush-deep:   var(--dawn-500);
  --blush-wash:   var(--cream-100);

  /* sage → olive */
  --sage:         var(--olive-600);
  --sage-wash:    var(--olive-100);

  --positive:     var(--olive-600);
  --positive-wash:var(--olive-100);
  --caution:      var(--amber-600);
  --caution-wash: var(--amber-100);
  --critical:     var(--terracotta-600);
  --critical-wash:var(--terracotta-100);

  --surface-alt:     var(--cream-300);
  --surface-accent:  var(--brown-900);
  --text-disabled:   var(--brown-400);
  --text-on-accent:  var(--cream-100);
  --border-soft:     var(--cream-300);

  --accent:        var(--brass-600);
  --accent-hover:  var(--brass-700);
  --accent-press:  var(--brass-700);
  --accent-wash:   var(--amber-100);
  --on-accent:     var(--cream-50);
}

/* ─────────── tokens/typography.css ─────────── */
/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY, The Lasting Hours
   Three-role editorial system. Branch is RESERVED for display
   (hero, headlines, wordmark) and set UPPERCASE so it never reads as
   the competitors' all-Didone look. EB Garamond is the warm, low-
   contrast anti-Didone that carries text & headings. Josefin Sans
   handles labels, eyebrows, buttons and UI.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Families (3 roles) ── */
  --font-display: 'Branch', 'Cormorant Garamond', Georgia, serif;        /* hero (UPPERCASE) + display (sentence case) */
  --font-serif:   'EB Garamond', Georgia, serif;                         /* text & headings / body */
  --font-sans:    'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;   /* labels / eyebrows / UI / buttons */
  --font-script:  'Mrs Saint Delafield', 'Snell Roundhand', cursive;     /* logo lockup flourish only, NOT a text role */

  /* Legacy aliases (older code) */
  --font-text:    var(--font-serif);
  --font-label:   var(--font-sans);

  /* ── Weights ── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Canonical scale (editorial, generous) ── */
  --text-hero:    clamp(56px, 7vw, 92px);  /* @kind font */ /* Branch, UPPERCASE */
  --text-display: clamp(40px, 5vw, 64px);  /* @kind font */
  --text-h1:      44px;
  --text-h2:      34px;
  --text-h3:      24px;
  --text-h4:      21px;
  --text-body-lg: 20px;
  --text-body:    18px;
  --text-body-sm: 16px;
  --text-caption: 14px;
  --text-eyebrow: 13px;
  --text-micro:   11px;

  /* ── Legacy display / text / label scale (kept for older code) ── */
  --display-xl:  clamp(3.5rem, 6vw, 6rem); /* @kind font */
  --display-lg:  clamp(2.75rem, 4.5vw, 4.25rem); /* @kind font */
  --display-md:  clamp(2.25rem, 3.2vw, 3rem); /* @kind font */
  --display-sm:  1.875rem;
  --text-2xl: 1.5rem;
  --text-xl:  1.25rem;
  --text-lg:  1.125rem;
  --text-md:  1rem;
  --text-sm:  0.875rem;
  --text-xs:  0.75rem;
  --label-lg: 0.875rem;
  --label-md: 0.75rem;
  --label-sm: 0.6875rem;

  /* ── Line heights ── */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Letter spacing ── */
  --tracking-display: 0.035em;  /* Branch HERO, uppercase */
  --tracking-display-text: 0;   /* Branch DISPLAY, sentence case, lets ligatures connect */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-body:    0;
  --tracking-wide:    0.08em;
  --tracking-label:   0.18em;   /* Josefin labels / buttons */
  --tracking-eyebrow: 0.32em;   /* Josefin eyebrows */
  --tracking-wider:   0.46em;   /* "PARIS" lockup */

  /* ── Semantic role aliases ── */
  --type-hero-family:    var(--font-display);
  --type-hero-tracking:  var(--tracking-display);
  --type-heading-family: var(--font-serif);
  --type-body-family:    var(--font-serif);
  --type-eyebrow-family: var(--font-sans);
  --type-button-family:  var(--font-sans);
  --type-accent-family:  var(--font-script);
}

/* ─────────── tokens/spacing.css ─────────── */
/* ── The Lasting Hours, Spacing & Layout ──────────────────────
   4px base grid. Generous by default, the brand breathes.
--------------------------------------------------------------- */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-9:   6rem;     /* 96 */
  --space-10:  8rem;     /* 128 */

  /*, Layout, */
  --measure:        66ch;    /* ideal prose width */
  --container:      1200px;  /* standard content width */
  --container-max:  1200px;  /* canonical alias */
  --container-wide: 1440px;
  --gutter:         clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --section-y:      clamp(4rem, 9vw, 8rem); /* @kind spacing */

  /* Semantic (canonical) */
  --gap-inline:  var(--space-3);
  --gap-stack:   var(--space-5);
  --pad-control: 14px 26px;
  --pad-input:   13px 16px;
  --pad-card:    var(--space-6);
}

/* ─────────── tokens/radius.css ─────────── */
/* ════════════════════════════════════════════════════════════════
   RADIUS & BORDERS, The Lasting Hours
   Squared & editorial. Default 2px; pills only for tags/chips.
   ════════════════════════════════════════════════════════════════ */
:root {
  --radius-none: 0;
  --radius-xs:   1px;
  --radius-sm:   2px;    /* default, cards, inputs, buttons */
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-pill: 999px;  /* tags, chips */
  --radius-circle: 50%;
  --radius-card: var(--radius-sm);

  --border-width:       1px;
  --border:             1px solid var(--border-hairline);
  --border-strong-line: 1px solid var(--border-strong);
  --border-accent-line: 1px solid var(--border-accent);
}

/* ─────────── tokens/elevation.css ─────────── */
/* ════════════════════════════════════════════════════════════════
   ELEVATION & MOTION, The Lasting Hours
   Shadows are warm, low and brown-based, golden-hour diffusion,
   never blue-grey, never hard. Motion is calm and slow; nothing bounces.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Canonical shadows (warm brown) ── */
  --shadow-none:    none;
  --shadow-hairline:0 1px 0 rgba(45, 40, 35, 0.04);
  --shadow-card:    0 1px 3px rgba(45, 40, 35, 0.08);
  --shadow-raised:  0 8px 30px rgba(45, 40, 35, 0.10);
  --shadow-overlay: 0 24px 60px rgba(45, 40, 35, 0.18);
  --shadow-focus:   0 0 0 3px rgba(168, 133, 74, 0.30);  /* brass focus ring */

  /* ── Legacy aliases (older code) ── */
  --shadow-xs: var(--shadow-hairline);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-raised);
  --shadow-lg: var(--shadow-overlay);
  --shadow-ring: 0 0 0 1px var(--border-hairline);
  --ring: var(--shadow-focus);

  /* ── Motion ── */
  --ease-standard: cubic-bezier(0.33, 0, 0.2, 1); /* @kind other */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */

  /* Legacy aliases */
  --ease-out:   var(--ease-standard);
  --ease-inout: var(--ease-entrance);
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
  --dur-grand:  720ms; /* @kind other */
}


/* ─────────── BASE — application des tokens (ajout câblage, hors tokens officiels) ───────────
   Minimal : rend les polices visibles. Le détail couleurs/boutons se règle dans Astra (étape 3).
--------------------------------------------------------------- */
body {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--surface-page);
}
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--font-serif);
  color: var(--text-primary);
}
/* Hero Branch : réservé, UPPERCASE, tracké (à poser via une classe dédiée plus tard) */
.lh-hero {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  font-size: var(--text-hero);
}
/* Display Branch : sentence case, tracking 0 (ligatures) */
.lh-display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display-text);
  line-height: var(--leading-snug);
  font-size: var(--text-display);
}
/* Eyebrows / labels / boutons : Josefin, UPPERCASE tracké */
.lh-eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
}
button, .button, .wp-block-button__link, input, select, textarea {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-label);
}