/* ==========================================================================
   PREVIOUS TYPOGRAPHY & PALETTE RECORD (Saved for quick reversion):
   - Previous Fonts:
     --font-logo:   'Carlito', sans-serif;
     --font-serif:  'Playfair Display', serif;
     --font-sans:   'Inter Tight', sans-serif;
     @import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Inter+Tight:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

   - Previous Warm Palette:
     --ink: #15130F; --ink-soft: #2A2824; --ink-mute: #6B665C; --ink-line: #D9D4C7;
     --paper: #F2EFE9; --paper-soft: #EAE5DB; --paper-deep: #DFD9CF;
     --stage: #0E0D0B; --stage-soft: #1C1A16;
     --accent: #EFE6D0; --accent-soft: #D6CCB2;
     --on-stage-1: #F4F0E6; --on-stage-2: #BEB8A8; --on-stage-3: #7C766A; --on-stage-line: #2C2A25;
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Neutral Monochrome Palette (0% Saturation, exact matched brightness values) */
  --ink:              #131313;
  --ink-soft:         #282828;
  --ink-mute:         #666666;
  --ink-line:         #D4D4D4;

  --paper:            #EFEFEF;
  --paper-soft:       #E5E5E5;
  --paper-deep:       #DADADA;

  --stage:            #0D0D0D;
  --stage-soft:       #1A1A1A;

  --accent:           #E6E6E6;
  --accent-soft:      #CCCCCC;

  --fg-1:             var(--ink);
  --fg-2:             var(--ink-soft);
  --fg-3:             var(--ink-mute);
  --bg-1:             var(--paper);
  --bg-2:             var(--paper-soft);
  --bg-3:             var(--paper-deep);
  --line:             var(--ink-line);

  --on-stage-1:       #F0F0F0;
  --on-stage-2:       #B8B8B8;
  --on-stage-3:       #767676;
  --on-stage-line:    #2A2A2A;

  --page-max:         1680px;
  --page-margin:      clamp(12px, 2.25vw, 36px);
  --section-pad-y:    clamp(40px, 3.75vw, 65px);
  --grid-gap-x:       clamp(12px, 1.75vw, 24px);
  --grid-gap-y:       clamp(24px, 2.75vw, 36px);
  --rule:             1px solid var(--ink-line);

  --font-logo:        'Roboto', sans-serif;
  --font-heading:     'Inter', sans-serif;
  --font-serif:       'Inter', sans-serif;
  --font-sans:        'Open Sans', sans-serif;

  --ease-out:         cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 720px) {
  :root {
    --page-margin:    10px;
    --section-pad-y:  32px;
    --grid-gap-x:     10px;
    --grid-gap-y:     20px;
  }
}