/* =========================================================
   Design Steel Project (DSP) — Colors & Type
   ========================================================= */

@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('../fonts/AppleGaramond-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --dsp-navy:        #0B1630;
  --dsp-steel:       #16233F;
  --dsp-night-soft:  #101C36;
  --dsp-gold:        #C79A42;
  --dsp-gold-hover:  #D8B56A;
  --dsp-bone:        #F8F6F1;
  --dsp-mist:        #D9D4CC;

  --dsp-gold-12:   rgba(199,154,66,0.12);
  --dsp-gold-20:   rgba(199,154,66,0.20);
  --dsp-gold-40:   rgba(199,154,66,0.40);
  --dsp-gold-line: rgba(199,154,66,0.35);

  --dsp-navy-60:  rgba(11,22,48,0.60);
  --dsp-navy-80:  rgba(11,22,48,0.80);
  --dsp-bone-08:  rgba(248,246,241,0.08);
  --dsp-bone-16:  rgba(248,246,241,0.16);
  --dsp-bone-60:  rgba(248,246,241,0.60);

  --bg-primary:        var(--dsp-navy);
  --bg-elevated:       var(--dsp-steel);
  --bg-soft:           var(--dsp-night-soft);
  --bg-light:          var(--dsp-bone);
  --bg-light-alt:      #EFEBE2;

  --fg-on-dark:        var(--dsp-bone);
  --fg-on-dark-muted:  #B8B2A6;
  --fg-on-light:       var(--dsp-navy);
  --fg-on-light-muted: #5A6378;
  --accent:            var(--dsp-gold);
  --accent-hover:      var(--dsp-gold-hover);

  --border-on-dark:      var(--dsp-gold-line);
  --border-on-dark-soft: var(--dsp-bone-16);
  --border-on-light:     rgba(11,22,48,0.12);

  --font-serif: 'Apple Garamond','Cormorant Garamond',Garamond,Georgia,serif;
  --font-sans:  'Inter','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:  'JetBrains Mono',ui-monospace,monospace;

  --fs-display: clamp(3.5rem,6vw,5.5rem);
  --fs-h1:      clamp(2.5rem,4vw,3.5rem);
  --fs-h2:      clamp(2rem,3vw,2.75rem);
  --fs-h3:      1.75rem;
  --fs-h4:      1.375rem;
  --fs-lead:    1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-eyebrow: 0.22em;
  --tracking-button:  0.14em;
  --tracking-nav:     0.06em;
  --tracking-tight:   -0.01em;

  --header-h: 44px; /* header sans logo (nav + padding) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 72px;  --space-10: 96px; --space-11: 112px;

  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  --shadow-soft:      0 1px 2px rgba(11,22,48,.06),0 8px 24px rgba(11,22,48,.08);
  --shadow-card:      0 2px 6px rgba(11,22,48,.10),0 24px 48px -12px rgba(11,22,48,.18);
  --shadow-gold-glow: 0 0 0 1px var(--dsp-gold-20),0 12px 32px -12px rgba(199,154,66,.35);

  --ease-out:    cubic-bezier(0.22,0.61,0.36,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;

  --container-max: 1320px;
  --container-pad: clamp(20px,4vw,64px);
}

/* ===== Responsive — header réduit en mobile (sticky/scroll-margin suivent) ===== */
@media (max-width: 768px) { :root { --header-h: 44px; } }