/* ============================================================
   PATRIMMOFI — Colors & Type foundations
   Source of truth: CHARTE-Groupe Patrimmofi.pdf + patrimmofi.fr
   ============================================================ */

/* App / internal-tool UI layer (states, surfaces, density, components) */
@import "app-ui.css";

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (charte) ---------- */
  --rouge: #6C1714;        /* Rouge profond — highlights, secondary titles, accent */
  --rouge-deep: #4A0F0D;   /* darker red for pressed/hover-dark states (derived) */
  --creme: #F2EEE8;        /* Crème — light backgrounds */
  --brun: #4E443B;         /* Marron / gris foncé — body text & titles */
  --noir: #161616;         /* Near-black — dark luxury backgrounds (site theme color) */
  --blanc: #FFFFFF;

  /* ---------- Derived neutrals (harmonious, oklch-tuned) ---------- */
  --creme-50:  #FAF8F4;    /* lightest paper */
  --creme-100: #F2EEE8;    /* base crème */
  --creme-200: #E7E0D5;    /* hairline / borders on crème */
  --creme-300: #D8CEBE;    /* stronger borders, dividers */
  --brun-700:  #4E443B;    /* base brun */
  --brun-500:  #7A6E62;    /* muted brun — captions, meta */
  --brun-400:  #9A8E80;    /* placeholder, disabled text */
  --noir-900:  #161616;    /* base noir */
  --noir-800:  #211F1D;    /* raised surface on dark */
  --noir-700:  #2E2A26;    /* card on dark / hairlines on dark */

  /* ---------- Semantic — light theme (default) ---------- */
  --fg-1: var(--brun-700);     /* primary text */
  --fg-2: var(--brun-500);     /* secondary text */
  --fg-3: var(--brun-400);     /* tertiary / disabled */
  --accent: var(--rouge);      /* primary accent */
  --bg-1: var(--creme-100);    /* page background */
  --bg-2: var(--creme-50);     /* raised surface / card */
  --bg-3: var(--blanc);        /* highest surface */
  --line: var(--creme-200);    /* hairline border */
  --line-strong: var(--creme-300);

  /* ---------- Type families ---------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-display-num: "Cormorant Garamond", Georgia, serif; /* used for titles w/ figures */
  --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Fluid type ramp ----------
     One scale from 360 to 1440 px. Display = Cormorant Garamond medium;
     supporting text = Inter. Every semantic role now grows at the same pace. */
  --display-1-size: clamp(2.625rem, 2rem + 2.778vw, 4.5rem);
  --display-1-lh: 1.02;
  --display-2-size: clamp(2.125rem, 1.708rem + 1.852vw, 3.375rem);
  --display-2-lh: 1.02;
  --display-3-size: clamp(1.75rem, 1.458rem + 1.296vw, 2.625rem);
  --display-3-lh: 1.04;
  --h1-size: clamp(2rem, 1.75rem + 1.111vw, 2.75rem);
  --h1-lh: 1.06;
  --h2-size: clamp(1.75rem, 1.583rem + .741vw, 2.25rem);
  --h2-lh: 1.1;
  --h3-size: clamp(1.4375rem, 1.333rem + .463vw, 1.75rem);
  --h3-lh: 1.14;
  --title-sec-size: clamp(1rem, .958rem + .185vw, 1.125rem);
  --title-sec-lh: 1.45;
  --eyebrow-size: clamp(.75rem, .729rem + .093vw, .8125rem);
  --eyebrow-lh: 1.25;
  --body-lg-size: clamp(1.125rem, 1.083rem + .185vw, 1.25rem);
  --body-lg-lh: 1.55;
  --body-size: clamp(1rem, .979rem + .093vw, 1.0625rem);
  --body-lh: 1.62;
  --small-size: clamp(.8125rem, .792rem + .093vw, .875rem);
  --small-lh: 1.55;
  --caption-size: clamp(.75rem, .729rem + .093vw, .8125rem);
  --caption-lh: 1.45;
  --micro-size: clamp(.625rem, .604rem + .093vw, .6875rem);
  --metric-size: clamp(2.75rem, 2.25rem + 2.222vw, 4.25rem);
  --monument-size: clamp(4rem, 2.208rem + 7.963vw, 9.375rem);
  --step-size: clamp(2rem, 1.875rem + .556vw, 2.375rem);

  --display-tracking: -0.05em;  /* charte: espacement des lettres -5% */
  --eyebrow-tracking: 0;
}

/* ============================================================
   Semantic element styles — apply via classes
   ============================================================ */

.pf-display-1, .pf-display-2, .pf-display-3, .pf-h1, .pf-h2, .pf-h3,
.pf-metric, .pf-monument, .pf-step-number {
  font-family: var(--font-display);
  font-weight: 500;            /* medium */
  letter-spacing: var(--display-tracking);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.pf-display-1 { font-size: var(--display-1-size); line-height: var(--display-1-lh); }
.pf-display-2 { font-size: var(--display-2-size); line-height: var(--display-2-lh); }
.pf-display-3 { font-size: var(--display-3-size); line-height: var(--display-3-lh); }
.pf-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); }
.pf-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); }
.pf-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); }
.pf-metric { font-size: var(--metric-size); line-height: 1; }
.pf-monument { font-size: var(--monument-size); line-height: .9; }
.pf-step-number { font-size: var(--step-size); line-height: 1; }

/* Italic emphasis inside display headings (site uses italic for the "accent" words) */
.pf-display-1 em, .pf-display-2 em, .pf-display-3 em, .pf-h1 em, .pf-h2 em, .pf-h3 em,
.pf-em {
  font-style: italic;
  font-weight: 500;
  color: var(--rouge);
}

/* Eyebrow / kicker - Inter, uppercase, tracking 0, red */
.pf-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--rouge);
  margin: 0;
}

/* Secondary title / highlight — Inter medium, red, 0% tracking */
.pf-title-sec {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--title-sec-size);
  line-height: var(--title-sec-lh);
  letter-spacing: 0;
  color: var(--rouge);
  margin: 0;
}

.pf-body-lg { font-family: var(--font-sans); font-weight: 300; font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--fg-1); margin: 0; }
.pf-body    { font-family: var(--font-sans); font-weight: 300; font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg-1); margin: 0; }
.pf-small   { font-family: var(--font-sans); font-weight: 400; font-size: var(--small-size); line-height: var(--small-lh); color: var(--fg-2); margin: 0; }
.pf-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--caption-size); line-height: var(--caption-lh); letter-spacing: 0.02em; color: var(--fg-2); margin: 0; }

/* ---------- Dark theme override ---------- */
.pf-dark {
  --fg-1: var(--creme-100);
  --fg-2: #BCB2A6;
  --fg-3: #8A8076;
  --accent: var(--creme-100);
  --bg-1: var(--noir-900);
  --bg-2: var(--noir-800);
  --bg-3: var(--noir-700);
  --line: var(--noir-700);
  --line-strong: #3A352F;
  color: var(--fg-1);
  background: var(--bg-1);
}
/* On dark, italic emphasis switches to crème (charte: crème logo/accents on dark) */
.pf-dark .pf-display-1 em, .pf-dark .pf-display-2 em, .pf-dark .pf-display-3 em,
.pf-dark .pf-h1 em, .pf-dark .pf-h2 em, .pf-dark .pf-h3 em,
.pf-dark .pf-em { color: var(--creme-100); }
.pf-dark .pf-eyebrow, .pf-dark .pf-title-sec { color: #BCB2A6; } /* warm crème kicker on dark */