/* NG Prod — Core Tokens
 * Source: NG_PROD_Brand_Concept_Spec.md (typography updated 2026, accent shifted to teal 2026)
 * Black is the stage. White is the choice. Teal (sarcelle) is rare — on request only.
 */

/* ============ FONTS ============ */
/* Mona Sans is hosted on Google Fonts (variable). Cormorant Garamond too. */
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

:root {
  /* ---------- COLOR — Primary Monochrome ---------- */
  --noir-absolu: #000000;        /* Pure black — hero / full bleed / stage */
  --noir-profond: #0a0a0a;       /* Working black — general backgrounds */
  --blanc-pur: #ffffff;          /* Primary foreground */

  /* ---------- COLOR — Secondary Greys ---------- */
  --gris-scene: #1e1e1e;         /* Elevated surface, frosted UI */
  --gris-signal: #3a3a3a;        /* Borders, dividers, secondary surfaces */
  --gris-voix: #8f8f8f;          /* Secondary text, labels, captions */
  --gris-texte: #c8c8c8;         /* Body text alt */
  --blanc-doux: rgba(255, 255, 255, 0.70); /* Subtitles */
  --blanc-surface: rgba(255, 255, 255, 0.05); /* Frosted tint */

  /* ---------- COLOR — Teal Accent (Sarcelle) — on request only ---------- */
  /* The brand lives between black and white. Sarcelle ships only when asked. */
  --sarcelle-signal: #14a8d4;        /* Primary teal — interactive, CTA */
  --sarcelle-profond: #0c7fa3;       /* Hover / pressed */
  --sarcelle-nuit: #0a3550;          /* Dark teal surface */
  --sarcelle-doux: rgba(20, 168, 212, 0.15); /* Glow / tint */
  --sarcelle-texte: #9ed8ed;         /* Light teal text */

  /* ---------- COLOR — Semantic Aliases ---------- */
  --bg: var(--noir-profond);
  --bg-stage: var(--noir-absolu);
  --bg-elev: var(--gris-scene);
  --fg: var(--blanc-pur);
  --fg-muted: var(--gris-texte);
  --fg-soft: var(--blanc-doux);
  --fg-quiet: var(--gris-voix);
  --border: var(--gris-signal);
  --border-soft: rgba(255, 255, 255, 0.08);
  --accent: var(--sarcelle-signal);
  --accent-hover: var(--sarcelle-profond);
  --accent-text: var(--sarcelle-texte);

  /* ---------- GRADIENTS ---------- */
  --grad-fondu-noir: linear-gradient(180deg, #000000 0%, #1e1e1e 100%);
  --grad-vignette: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  --grad-voile: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%);
  --grad-horizon-sarcelle: linear-gradient(0deg, #0c7fa3 0%, #000000 100%);
  --grad-lueur-sarcelle: radial-gradient(ellipse at center, rgba(20,168,212,0.20) 0%, rgba(20,168,212,0) 70%);
  --grad-bordure-sarcelle: linear-gradient(135deg, #14a8d4 0%, #0c7fa3 100%);

  /* ---------- TYPOGRAPHY — Families ---------- */
  /* Mona Sans is the sole functional typeface. Hierarchy is built from
   * weight + size + case + color contrast — NOT from typeface switching.
   * Cormorant Garamond is restricted: single-line editorial moments at 40px+ only.
   * Never body, captions, UI, or anything under 32px.
   */
  --font-sans: "Mona Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif; /* RESTRICTED — see above */

  /* ---------- TYPOGRAPHY — Width (variable axis) ---------- */
  /* Mona Sans wdth axis: 75 (condensed) – 100 (normal) – 125 (expanded). */
  --mona-width: 115%;          /* Slightly expanded — more architectural presence */

  /* Threshold below which Cormorant is forbidden. */
  --serif-min: 40px;

  /* ---------- TYPOGRAPHY — Weight ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- TYPOGRAPHY — Tracking ---------- */
  --track-tight: -0.02em;
  --track-snug: -0.01em;
  --track-normal: 0;
  --track-wide: 0.08em;
  --track-wider: 0.16em;       /* labels / eyebrows */
  --track-widest: 0.24em;

  /* ---------- TYPOGRAPHY — Sizes (semantic) ---------- */
  /* Level 1 — Command (Mona Sans, dominant, uppercase, tight) */
  --fs-display: clamp(56px, 8vw, 128px);
  --fs-h1: clamp(40px, 5.5vw, 80px);
  /* Level 2 — Identity (Mona Sans, controlled, uppercase) */
  --fs-h2: clamp(28px, 3.4vw, 48px);
  --fs-h3: clamp(20px, 2.2vw, 28px);
  --fs-eyebrow: 12px;
  --fs-label: 13px;
  /* Level 3 — Story (Cormorant Garamond, sentence case) */
  --fs-lead: clamp(20px, 1.8vw, 26px);
  --fs-body: 17px;
  /* Level 4 — Whisper */
  --fs-small: 13px;
  --fs-micro: 11px;

  /* ---------- TYPOGRAPHY — Line height ---------- */
  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  /* ---------- SPACING SCALE ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-5xl: 192px;

  /* ---------- RADII ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---------- SHADOWS / GLOWS ---------- */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 8px 48px rgba(0, 0, 0, 0.8);
  /* --shadow-focus retired — keyboard focus uses a simple white ring (see inputs/buttons) */
  --glow-white-soft: 0 0 20px rgba(255, 255, 255, 0.08);
  --glow-white-strong: 0 0 40px rgba(255, 255, 255, 0.18);
  --glow-teal-soft: 0 0 24px rgba(20, 168, 212, 0.20);
  --glow-teal-strong: 0 0 48px rgba(20, 168, 212, 0.35);

  /* ---------- SURFACE — Frosted glass ---------- */
  --surface-frosted-bg: rgba(30, 30, 30, 0.85);
  --surface-frosted-blur: blur(24px);

  /* ---------- MOTION ---------- */
  --ease-out-cinema: cubic-bezier(0.16, 1, 0.3, 1);    /* settles, doesn't snap */
  --ease-in-out-cinema: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
  --dur-cinema: 900ms;          /* aperture / lens reveals */
}

/* ============ BASE ============ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-stretch: var(--mona-width);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============ SEMANTIC TYPE ============ */
/* Level 1 — Command */
.t-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-stretch: var(--mona-width);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
h1, .t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-stretch: var(--mona-width);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

/* Level 2 — Identity */
h2, .t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-stretch: var(--mona-width);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  text-transform: uppercase;
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-stretch: var(--mona-width);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  text-transform: uppercase;
  margin: 0;
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-stretch: var(--mona-width);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-quiet);
}
.t-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-stretch: var(--mona-width);
  font-size: var(--fs-label);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

/* Level 3 — Story (Mona Sans — sans-first system) */
.t-lead {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-medium);          /* 500 — supporting prose, secondary statements */
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-normal);
}
p, .t-body {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-regular);         /* 400 — body, descriptions, long-form */
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-md);
}
/* Legacy alias — same as p now */
.t-body--sans {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-regular);
}
.t-body--medium {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-medium);
}

/* Level 4 — Whisper */
.t-small {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-size: var(--fs-small);
  color: var(--fg-quiet);
  line-height: var(--lh-normal);
}
.t-micro {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-size: var(--fs-micro);
  color: var(--fg-quiet);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* Italic editorial — Mona Sans 500 italic. Emotional pivots, pull quotes,
 * signature lines. Use anywhere; this is now the everyday italic. */
.t-italic {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-medium);
  font-style: italic;
  text-transform: none;
  letter-spacing: var(--track-snug);
}

/* Question close — 32–44px Mona italic 500. The signature “est-elle vraiment
 * montrée ?” moment. Italic carries softness; medium gives presence. */
.t-question {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-medium);
  font-style: italic;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: none;
}

/* Three-part statement — Mona Sans Bold 700 UPPERCASE. */
.t-statement {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-snug);
  line-height: var(--lh-snug);
}

/* Contrast statement — weight does the work.
 * Wrap the “not this” in .t-contrast-quiet, the “but this” in .t-contrast-strong. */
.t-contrast-quiet {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-regular);         /* 400 */
  color: var(--fg-muted);
}
.t-contrast-strong {
  font-family: var(--font-sans);
  font-stretch: var(--mona-width);
  font-weight: var(--fw-semibold);        /* 600 */
  color: var(--fg);
}

/* Cormorant — RESTRICTED. Single-line editorial moments only, 40px+. */
/* Never body, captions, UI, or anything under 32px. < 10% of any deliverable. */
.t-editorial {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Garnish: a single Cormorant italic word inside a 40px+ Mona headline. */
.t-emph {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0;
}

/* Code (used for tokens in the design system itself) */
code, .t-code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--gris-texte);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}