/* ============================================================================
   SILBERLING STUDIO Design Tokens
   Generated from Charte Graphique 2025 + silberlingstudio.com
   No red usage on the site (per brand instruction).
   ============================================================================ */

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

/* Essential Sans police propriétaire Silberling Studio */
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-Hairline.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-HairlineItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Essential Sans'; src: url('fonts/EssentialSans-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* === COULEURS PRINCIPALES (charte 2025) === */
  --ink:           #000000;
  --olive-night:   #2A2A19;
  --bronze:        #695C3D;
  --sand:          #BDB69D;
  --cream:         #F7F3E9;
  --paper:         #FFFFFF;

  /* === NEUTRES SECONDAIRES === */
  --paper-grey:    #D9D4CB;
  --ink-soft:      #8A8478;
  --ink-faint:     #B8B2A6;

  /* === SEMANTIC === */
  --bg:            var(--paper);
  --bg-alt:        var(--cream);
  --fg:            var(--ink);
  --fg-soft:       var(--ink-soft);
  --rule:          var(--paper-grey);
  --accent:        var(--ink);

  /* === TYPOGRAPHIE === */
  --font-sans:       'Essential Sans', system-ui, -apple-system, sans-serif;
  --font-serif:      'EB Garamond', 'Adobe Garamond', Georgia, serif;
  --font-mono-serif: 'Cormorant Garamond', 'Cormorant', serif;

  /* === ÉCHELLE TYPOGRAPHIQUE === */
  --fs-overline: 0.75rem;
  --fs-caption:  0.875rem;
  --fs-body:     1rem;
  --fs-body-lg:  1.125rem;
  --fs-h6:       1.25rem;
  --fs-h5:       1.5rem;
  --fs-h4:       clamp(1.75rem, 2.5vw, 2.25rem);
  --fs-h3:       clamp(2rem, 3.5vw, 3rem);
  --fs-h2:       clamp(2.5rem, 5vw, 4rem);
  --fs-h1:       clamp(3rem, 7vw, 5.5rem);
  --fs-display:  clamp(4rem, 10vw, 8rem);

  /* === TRACKING === */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.18em;

  /* === LINE HEIGHT === */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* === LAYOUT === */
  --measure:        52ch;
  --container:      1280px;
  --gutter:         clamp(1.5rem, 4vw, 3rem);

  /* === RADIUS === */
  --r-pill: 999px;

  /* === MOTION === */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   520ms;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  text-wrap: pretty;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
</content>
</invoke>