/* =========================================================
   Antoine Gérard — Design Tokens
   Base type + color + spacing + semantic styles
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../fonts/PerfectlyNineties-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../fonts/PerfectlyNineties-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/InterVariable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/InterVariable-Italic.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Bordeaux family ---------- */
  --color-abyss:     #120106; /* deepest backgrounds, alt fills */
  --color-dark:      #30030E; /* default page background */
  --color-medium:    #510214; /* card surfaces on dark */
  --color-rich:      #74051D; /* borders, hover states */
  --color-deep-rose: #910628; /* decorative, active borders */
  --color-carmine:   #CD0B32; /* secondary accent */

  /* ---------- Velvet — primary accent ---------- */
  --color-velvet:    #FF0C2D; /* CTAs, links, signature pop */

  /* ---------- Ivory family ---------- */
  --color-stone:     #DBC5B7; /* secondary text on light, soft borders */
  --color-cream:     #EDDED4; /* primary text on bordeaux backgrounds */
  --color-parchment: #F7EFE9; /* light surfaces */

  /* ---------- Semantic — foreground ---------- */
  --fg-primary:   var(--color-cream);
  --fg-secondary: var(--color-stone);
  --fg-muted:     #B89A8A;             /* derived: stone @ ~70% */
  --fg-accent:    var(--color-velvet);
  --fg-link:      var(--color-velvet);

  /* ---------- Semantic — background ---------- */
  --bg-primary:   var(--color-dark);
  --bg-alt:       var(--color-abyss);
  --bg-card:      var(--color-medium);
  --bg-light:     var(--color-parchment);

  /* ---------- Semantic — borders ---------- */
  --border-soft:   rgba(219, 197, 183, 0.18); /* stone @ ~18% */
  --border-strong: var(--color-rich);
  --border-active: var(--color-deep-rose);

  /* ---------- Typography families ---------- */
  --font-display: 'Perfectly Nineties', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---------- Type scale (fluid) ---------- */
  --text-h1:     clamp(48px, 8vw, 120px);
  --text-h2:     clamp(32px, 5vw, 72px);
  --text-h3:     clamp(12px, 1.5vw, 16px);   /* uppercase + bold */
  --text-body:   clamp(15px, 1.2vw, 18px);
  --text-small:  clamp(11px, 1vw, 13px);

  /* ---------- Line heights ---------- */
  --lh-display: 1.02;
  --lh-h2:      1.08;
  --lh-h3:      1.2;
  --lh-body:    1.55;
  --lh-tight:   1.15;

  /* ---------- Letter spacing ---------- */
  --tracking-display: -0.02em;
  --tracking-h3:      0.18em;   /* uppercase bold needs space */
  --tracking-body:    -0.005em;
  --tracking-button:  0.01em;

  /* ---------- Spacing ---------- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  128px;
  --space-2xl: 200px;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-classic:  cubic-bezier(0.16, 1, 0.3, 1);   /* slow weighty out */
  --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-slow:   900ms;
  --dur-medium: 500ms;
  --dur-fast:   180ms;
  --dur-snap:   0ms;     /* the "claque" — insolent text has no transition */
}

/* =========================================================
   Semantic element styles
   ========================================================= */

html, body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: none;
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-display);
  text-transform: none;
  color: var(--fg-primary);
}

h1 em, h2 em, .h1 em, .h2 em {
  font-style: italic;
  font-weight: 400;
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-h3);
  color: var(--fg-primary);
}

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-h3);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg-primary);
}

small, .small {
  font-size: var(--text-small);
  color: var(--fg-secondary);
}

p strong, .body strong { font-weight: 700; }
p em, .body em         { font-style: italic; }

a, .link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }