/* ============================================================
   GLORIA RABARISON — DESIGN SYSTEM TOKENS
   Poterie · Terre de Madagascar
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── COULEURS — terre, eau, mémoire ──────────────────────── */
  --terre-rouge:        #B14A2E;   /* terracotta principal, Madagascar */
  --terre-vive:         #C9613E;   /* clair, soleil sur l'argile */
  --terre-cuite:        #8E3820;   /* cuit, profond */
  --terre-craquelee:    #4A2618;   /* terre sèche, ombres */
  --terre-bara:         #6B2F1C;   /* gravure */

  --argile-bone:        #E8D6B7;   /* argile crue, os */
  --argile-claire:      #D9C29C;   /* argile claire */
  --argile-ombre:       #B89875;

  --sable:              #EFE6D2;   /* fond chaud principal */
  --ivoire:             #F5EFE0;   /* fond le plus clair */
  --lin:                #E3D8BE;   /* fond secondaire */

  --charbon:            #1C1714;   /* texte profond */
  --encre:              #2B221A;   /* texte secondaire */
  --cendre:             #6B5E50;   /* texte tertiaire / méta */
  --brume:              #A89B85;   /* texte désactivé */

  --eau:                #5E7A7F;   /* accent froid — eau */
  --eau-profonde:       #2E4549;

  /* ── COULEURS SÉMANTIQUES ──────────────────────────────── */
  --bg:                 var(--sable);
  --bg-alt:             var(--ivoire);
  --bg-dark:            var(--terre-craquelee);
  --bg-deep:            #14100C;

  --ink:                var(--charbon);
  --ink-muted:          var(--cendre);
  --ink-on-dark:        var(--ivoire);
  --ink-on-dark-muted:  var(--argile-claire);

  --accent:             var(--terre-rouge);
  --accent-deep:        var(--terre-cuite);

  --rule:               rgba(28, 23, 20, 0.18);
  --rule-strong:        rgba(28, 23, 20, 0.42);
  --rule-on-dark:       rgba(245, 239, 224, 0.16);

  /* ── TYPOGRAPHIE ───────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* échelle modulaire (ratio 1.25 majeure) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   38px;
  --fs-3xl:   52px;
  --fs-4xl:   72px;
  --fs-5xl:   104px;
  --fs-6xl:   160px;

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-mega:   0.24em;

  /* ── ESPACEMENTS ───────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ── RAYONS ────────────────────────────────────────────── */
  --r-none:    0;
  --r-sm:      2px;
  --r-md:      4px;
  --r-full:    999px;

  /* ── OMBRES — douces, terre ───────────────────────────── */
  --shadow-soft:   0 1px 2px rgba(28, 23, 20, 0.04),
                   0 6px 24px -8px rgba(28, 23, 20, 0.12);
  --shadow-deep:   0 2px 6px rgba(28, 23, 20, 0.08),
                   0 24px 60px -16px rgba(28, 23, 20, 0.22);
  --shadow-press:  inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* ── GRILLE ─────────────────────────────────────────────── */
  --container:    1320px;
  --gutter:       24px;
  --col:          calc((var(--container) - 11 * var(--gutter)) / 12);

  /* ── MOTION ─────────────────────────────────────────────── */
  --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-base:   320ms;
  --dur-slow:   620ms;
  --dur-epic:   1200ms;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ── TYPO HELPERS ──────────────────────────────────────── */
.display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.display-italic { font-family: var(--font-display); font-style: italic; font-weight: 300; line-height: var(--lh-snug); }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--ink-muted);
}
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted);
}

/* ── TEXTURES UTILITAIRES ──────────────────────────────── */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.18;
}