/**
 * Design System: Prestige
 * Source: étude/plan-prestige.html
 * This is the single source of truth for all design tokens.
 * Do not duplicate these variables elsewhere.
 */

:root {
  --bg: oklch(97.5% 0.008 85);
  --bg-warm: oklch(95% 0.012 80);
  --surface: oklch(99% 0.005 85);
  --card: oklch(98.5% 0.006 85);
  --card-hover: oklch(96.5% 0.01 80);
  --line: oklch(86% 0.012 80);
  --line-soft: oklch(91% 0.01 80);
  --line-strong: oklch(70% 0.015 70);

  --ink: oklch(18% 0.015 60);
  --ink-soft: oklch(32% 0.015 60);
  --ink-mute: oklch(50% 0.012 60);
  --ink-dim: oklch(65% 0.01 70);

  --gold: oklch(58% 0.16 72);
  --gold-deep: oklch(42% 0.14 65);
  --gold-soft: oklch(88% 0.06 80);
  --burgundy: oklch(42% 0.18 28);
  --burgundy-soft: oklch(92% 0.04 30);
  --burgundy-deep: oklch(34% 0.16 28);   /* texte/alerte bordeaux, AA sur papier */
  --emerald: oklch(45% 0.12 155);
  --emerald-soft: oklch(92% 0.04 155);
  --ink-blue: oklch(38% 0.14 250);
  /* Ombres douces — profondeur « feuillet » (direction Maison) */
  --shadow-soft: 0 1px 2px oklch(40% 0.03 60 / 0.05);
  --shadow-feuillet: 0 8px 30px -12px oklch(40% 0.04 40 / 0.18);

  --tier-s: var(--burgundy);
  --tier-s-soft: var(--burgundy-soft);
  --tier-a: var(--gold);
  --tier-a-soft: var(--gold-soft);
  --tier-b: var(--emerald);
  --tier-b-soft: var(--emerald-soft);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 0.7rem;
  --text-sm: 0.85rem;
  --text-base: 0.94rem;
  --text-lg: 1.1rem;
  --text-xl: 1.35rem;
  --text-2xl: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  --text-3xl: clamp(2.2rem, 1.5rem + 2.5vw, 3.6rem);
  --text-hero: clamp(2.8rem, 1rem + 8vw, 7.5rem);

  --sp-xs: 0.4rem;
  --sp-sm: 0.8rem;
  --sp-md: 1.4rem;
  --sp-lg: 2.4rem;
  --sp-xl: 4rem;
  --sp-2xl: clamp(4rem, 3rem + 4vw, 7rem);

  --radius: 2px;
  --radius-lg: 6px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 360ms;
  --dur-slow: 720ms;
}

/**
 * Grain texture overlay
 * Apply .grain to body to activate noise texture
 */
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.018;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/**
 * Prestige base styles (opt-in)
 * Apply .prestige-base to root element to activate
 */
.prestige-base {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Shell back link utility class
 * Injected by JS when page is mounted under unified shell
 */
.shell-back-link {
  position: fixed;
  top: 0.6rem;
  left: 0.9rem;
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
}
.shell-back-link:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
}