/* =============================================================
   Jouan Real Estate - Style Layer
   Single source of truth for type, colour, spacing and primitives.
   Build-agnostic: works in a classic theme stylesheet or, if you go
   block-theme, mirror the :root values into theme.json.
   Font paths assume /assets/css/tokens.css + /assets/fonts/*.woff2;
   adjust the url() if your structure differs.
   ============================================================= */

/* ---------- Fonts (only the weights actually used) ---------- */
@font-face{
  font-family:"PP Telegraf";
  src:url("../fonts/PPTelegraf-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PP Telegraf";
  src:url("../fonts/PPTelegraf-RegularOblique.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
/* Ultralight is currently unused (all headings are Regular). If you ever
   need it, add the woff2 and a font-face at weight 200. */

:root{
  /* Typeface + weights */
  --font: "PP Telegraf", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-ultralight: 200; /* token kept for reference; load the file if used */

  /* Colour primaries */
  --c-light:  #EDEAE6;  /* light surface + light text on dark */
  --c-dark:   #272727;  /* dark surface + dark text on light */
  --c-accent: #928659;  /* sage accent, use sparingly */
  --c-darker:   #1a1a1a;  /* darker */

  /* Derived tints (all mixed from the three primaries) */
  --c-surface-light:   var(--c-light);
  --c-surface-light-2: #e8e3dd;
  --c-surface-dark:    var(--c-dark);
  --c-surface-dark-2:  color-mix(in srgb, var(--c-dark) 88%, var(--c-light));
  --c-text-on-light:        var(--c-dark);
  --c-text-on-light-muted:  color-mix(in srgb, var(--c-dark) 75%, var(--c-light));
  --c-text-on-dark:         var(--c-light);
  --c-text-on-dark-muted:   color-mix(in srgb, var(--c-light) 58%, var(--c-dark));
  --c-border-on-light: color-mix(in srgb, var(--c-dark) 15%, transparent);
  --c-border-on-dark:  color-mix(in srgb, var(--c-light) 22%, transparent);
  --c-accent-tint:     color-mix(in srgb, var(--c-accent) 45%, var(--c-light));

  /* Type scale - Headings */
  --fs-xl: clamp(2.5rem, 1.22rem + 5.12vw, 6.25rem);   /* 40 -> 100 (72 @1025) */
  --fs-l:  clamp(2.25rem, 1.58rem + 2.69vw, 4rem);     /* 36 -> 64 */
  --fs-m:  clamp(1.875rem, 1.54rem + 1.35vw, 2.75rem); /* 30 -> 44 */
  --fs-r:  clamp(1.5rem, 1.31rem + 0.77vw, 2rem);      /* 24 -> 32 */
  --fs-s:  clamp(1.25rem, 1.15rem + 0.38vw, 1.5rem);   /* 20 -> 24 */
  --fs-xs: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18 -> 20 */

  /* Type scale - Paragraph */
  --fs-pl:  clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);    /* 18 -> 20 */
  --fs-pr:  clamp(0.8125rem, 0.76rem + 0.19vw, 0.9375rem); /* 13 -> 15 (body) */
  --fs-ps:  clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);  /* 13 -> 14 */
  --fs-pxs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);   /* 12 -> 13 */

  /* Type scale - Mini headings / eyebrows */
  --fs-mhl: clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);  /* 13 -> 14 */
  --fs-mhr: clamp(0.6875rem, 0.66rem + 0.10vw, 0.75rem);   /* 11 -> 12 */
  --fs-mhs: clamp(0.625rem, 0.60rem + 0.10vw, 0.6875rem);  /* 10 -> 11 */

  /* Line heights + tracking */
  --lh-tight: 1.06;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --tr-tight: -0.015em;
  --tr-eyebrow: 0.2em;

  /* Spacing (8px base) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --sp-11:10rem; --sp-12:12rem; --sp-13:16rem; /* 160 / 192 / 256px */

  /* Layout */
  --container: 1820px;
  --gutter: clamp(1.25rem, 3vw, 3.125rem); /* 20 -> 50px */
  --section-y: clamp(4rem, 8vw, 8rem);

  /* Radius + motion */
  --radius-pill: 999px;
  --radius-card: 0px;
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* Tighten the spacing scale on phones so stacked content (eyebrow → heading →
   text → button, section heads, cards, gaps) reads more compactly. Section
   rhythm (--section-y) and gutters are separate and unaffected. */
@media (max-width:640px){
  :root{
    --sp-5:1.15rem; --sp-6:1.4rem; --sp-7:1.9rem; --sp-8:2.5rem;
    --sp-9:3.25rem; --sp-10:4.25rem; --sp-11:5.5rem; --sp-12:6.5rem; --sp-13:8rem;
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font);
  font-weight:var(--fw-regular);
  font-size:var(--fs-pr);
  line-height:var(--lh-body);
  color:var(--c-text-on-light);
  background:var(--c-surface-light);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:var(--fw-regular);margin:0;}
img{max-width:100%;display:block;}

/* ---------- Type utilities (named per the system) ---------- */
.h-xl{font-size:var(--fs-xl);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);}
.h-l {font-size:var(--fs-l); line-height:var(--lh-tight);letter-spacing:var(--tr-tight);}
.h-m {font-size:var(--fs-m); line-height:var(--lh-snug); letter-spacing:var(--tr-tight);}
.h-r {font-size:var(--fs-r); line-height:var(--lh-snug);}
.h-s {font-size:var(--fs-s); line-height:var(--lh-snug);}
.h-xs{font-size:var(--fs-xs);line-height:var(--lh-snug);}

.p-l {font-size:var(--fs-pl);}
.p-r {font-size:var(--fs-pr);}
.p-s {font-size:var(--fs-ps);}
.p-xs{font-size:var(--fs-pxs);}

.mh-l,.mh-r,.mh-s{
  text-transform:uppercase;
  letter-spacing:var(--tr-eyebrow);
  line-height:var(--lh-snug);
  font-weight:var(--fw-regular);
}
.mh-l{font-size:var(--fs-mhl);}
.mh-r{font-size:var(--fs-mhr);}
.mh-s{font-size:var(--fs-mhs);}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);}

/* Set background + correct text colours together */
.surface-light  {background:var(--c-surface-light);  color:var(--c-text-on-light);}
.surface-light-2{background:var(--c-surface-light-2);color:var(--c-text-on-light);}
.surface-dark   {background:var(--c-surface-dark);   color:var(--c-text-on-dark);}
.surface-dark .mh-l,.surface-dark .mh-r,.surface-dark .mh-s{color:var(--c-text-on-dark-muted);}
.text-muted{color:var(--c-text-on-light-muted);}
.surface-dark .text-muted{color:var(--c-text-on-dark-muted);}
.accent{color:var(--c-accent);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  padding:.875rem 1.75rem;
  font-family:var(--font);font-size:var(--fs-ps);font-weight:var(--fw-regular);
  letter-spacing:.02em;
  border-radius:var(--radius-pill);
  border:1px solid transparent;background:transparent;
  cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;}
.btn--ghost{border-color:var(--c-border-on-light);color:var(--c-text-on-light);}
.btn--ghost:hover{background:var(--c-dark);color:var(--c-light);}
.btn--ghost-dark{border-color:var(--c-border-on-dark);color:var(--c-text-on-dark);}
.btn--ghost-dark:hover{background:var(--c-light);color:var(--c-dark);}
.btn--solid{background:var(--c-light);color:var(--c-dark);}

/* Per-letter roll on hover + arrow nudge.
   Requires button-split.js to wrap the label into .char/.char__inner. */
.btn__label{display:inline-flex;}
.char{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em;}
.char__inner{
  display:block;will-change:transform;
  transition:transform .5s var(--ease);
  transition-delay:calc(var(--i,0)*24ms);
}
.char__inner span{display:block;height:1.3em;}
.btn:hover .char__inner,.btn:focus-visible .char__inner{transform:translateY(-50%);}
.btn__arrow{display:inline-block;transition:transform .35s var(--ease);}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(5px);}

@media (prefers-reduced-motion:reduce){
  .char__inner,.btn__arrow,.btn{transition:none!important;}
  .btn:hover .char__inner,.btn:focus-visible .char__inner{transform:none;}
  .btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:none;}
}