/* ═══════════════════════════════════════════════
   ProfiSaison — Base CSS
   Design Tokens, Fonts, Reset, Typography
   ═══════════════════════════════════════════════ */

/* ── Custom Properties ────────────────────────── */

:root {
  /* Brand Colors */
  --van-dyke:       #4A3C31;
  --ecru-gold:      #C9A66B;
  --chefchaouen:    #1A4E9E;
  --burnt-orange:   #D35400;
  --ecru-bg:        #F5F0E8;
  --si-grey:        #6B6B6B;
  --steel-blue:     #5D8AA8;
  --gold-border:    #CEB888;

  /* Product Color (overridden per template) */
  --product-color:  var(--burnt-orange);

  /* Text Opacities */
  --text:           #4A3C31;
  --text-70:        rgba(74, 60, 49, 0.70);
  --text-55:        rgba(74, 60, 49, 0.55);
  --text-45:        rgba(74, 60, 49, 0.45);
  --text-40:        rgba(74, 60, 49, 0.40);
  --text-10:        rgba(74, 60, 49, 0.10);
  --text-08:        rgba(74, 60, 49, 0.08);
  --text-06:        rgba(74, 60, 49, 0.06);

  /* Spacing */
  --container-max:  80rem;    /* 1280px */
  --content-max:    64rem;    /* 1024px */
  --content-narrow: 48rem;    /* 768px */
  --section-py:     4rem;
  --card-padding:   1.75rem;
  --nav-height:     6rem;     /* 96px */
  --grid-gap:       1.25rem;  /* 20px */

  /* Fonts */
  --font-sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:  'Space Mono', 'Courier New', monospace;
}

@media (min-width: 768px) {
  :root {
    --section-py: 5rem;
  }
}

/* ── Font Faces ───────────────────────────────── */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2'),
       url('../fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader-VariableFont_opsz,wght.woff2') format('woff2'),
       url('../fonts/Newsreader-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader-Italic-VariableFont_opsz,wght.woff2') format('woff2'),
       url('../fonts/Newsreader-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Regular.woff2') format('woff2'),
       url('../fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Bold.woff2') format('woff2'),
       url('../fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/* ── Reset ────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--text);
  background-color: var(--ecru-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--chefchaouen);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--burnt-orange);
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* ── Typography ───────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

h1 {
  font-size: 2.25rem;       /* 36px mobile */
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.5rem;        /* 24px mobile */
  letter-spacing: 0.025em;
}

h3 {
  font-size: 1.25rem;       /* 20px */
}

@media (min-width: 768px) {
  h1 {
    font-size: 4.5rem;      /* 72px desktop */
  }

  h2 {
    font-size: 1.75rem;     /* 28px desktop */
  }
}

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

/* Utility: font families */
.ps-font-sans  { font-family: var(--font-sans); }
.ps-font-serif { font-family: var(--font-serif); }
.ps-font-mono  { font-family: var(--font-mono); }

/* Utility: text colors */
.ps-text           { color: var(--text); }
.ps-text-70        { color: var(--text-70); }
.ps-text-55        { color: var(--text-55); }
.ps-text-45        { color: var(--text-45); }
.ps-text-40        { color: var(--text-40); }
.ps-text-ecru      { color: var(--ecru-gold); }
.ps-text-blue      { color: var(--chefchaouen); }
.ps-text-orange    { color: var(--burnt-orange); }

/* Utility: letter spacing */
.ps-tracking-wide    { letter-spacing: 0.025em; }
.ps-tracking-wider   { letter-spacing: 0.05em; }
.ps-tracking-widest  { letter-spacing: 0.12em; }
.ps-tracking-badge   { letter-spacing: 0.18em; }