/* ========================================
   DESIGN TOKENS (Variables & Fonts)
   ======================================== */

/* ----------------------------------------
   A. FONT FACES
   ---------------------------------------- */
@font-face {
  font-family: 'PP Lettra Mono';
  src: url('../assets/fonts/PPLettraMono-Regular.woff2') format('woff2'),
       url('../assets/fonts/PPLettraMono-Light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block; 
}
@font-face {
  font-family: 'PP Lettra Mono';
  src: url('../assets/fonts/PPLettraMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'PP Lettra Mono';
  src: url('../assets/fonts/PPLettraMono-BoldItalic.woff2') format('woff2'),
       url('../assets/fonts/PPLettraMono-SemiboldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'PP Lettra Mono';
  src: url('../assets/fonts/PPLettraMono-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: block;
}

@font-face { font-family: 'PP Neue Montreal'; src: url('../assets/fonts/PPNeueMontreal-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'PP Neue Montreal'; src: url('../assets/fonts/PPNeueMontreal-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: 'PP Neue Montreal'; src: url('../assets/fonts/PPNeueMontreal-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: 'PP Neue Montreal'; src: url('../assets/fonts/PPNeueMontreal-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: block; }

@font-face { font-family: 'PP Neue Montreal Mono'; src: url('../assets/fonts/PPNeueMontrealMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'PP Neue Montreal Mono'; src: url('../assets/fonts/PPNeueMontrealMono-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: 'PP Neue Montreal Mono'; src: url('../assets/fonts/PPNeueMontrealMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: block; }

/* ----------------------------------------
   B. GLOBAL VARIABLES
   ---------------------------------------- */
:root {
  /* Base Color Palette */
  --color-bordeaux: #962F36;
  --color-paper: #F9F8F1;
  --color-cloud: #536868;
  --color-alpine: #17352F;

  /* Dynamic Semantic Theme */
  --color-bg: var(--color-paper);
  --color-text: var(--color-alpine);
  --color-accent: var(--color-bordeaux);

  /* Typography Variables */
  --font-primary: 'PP Lettra Mono', monospace;
  --font-secondary: 'PP Neue Montreal', sans-serif;
  --font-mono: 'PP Neue Montreal Mono', monospace;

  /* Baseline = 4px (0.25rem) */
  --grid-baseline: 0.25rem; 

  /* Typography Sizes */
  --type-display-size: 1.875rem;     
  --type-display-lh: 2.5rem;         
  --type-body-size: 1rem;           
  --type-body-lh: 1.5rem;           
  --type-works-size: 1.6875rem;     
  --type-works-lh: 2.25rem;         
  --type-data-size: 0.875rem;       
  --type-data-lh: 1.5rem;           

  /* Grid & Spacing (Desktop) */
  --grid-columns: 12;
  --grid-margin: 2.25rem;           
  --grid-gutter: 0.75rem;           
  --header-margin-top: calc(var(--grid-baseline) * 6);  
  --footer-margin-bottom: calc(var(--grid-baseline) * 6);

  /* Motion Tokens */
  --motion-fast: 150ms;
  --motion-normal: 300ms;
  --motion-slow: 600ms;
  --motion-breath: 3000ms;
  
  --ease-interaction: cubic-bezier(0.2, 0.8, 0.2, 1); 
  --ease-ambient: ease-in-out;
  
  /* Blur Focus */
  --blur-mid: 4px;  
  --blur-far: 12px; 
}

/* ----------------------------------------
   C. BREAKPOINTS VARIABLES
   ---------------------------------------- */
@media (max-width: 768px) {
  :root {
    --grid-columns: 4;
    --grid-margin: 1.25rem;         
    --grid-gutter: 0.75rem;         
    --header-margin-top: calc(var(--grid-baseline) * 5);  
    --footer-margin-bottom: calc(var(--grid-baseline) * 5);
  }
}

/* ----------------------------------------
   D. PROJECT COLOR THEMES
   ---------------------------------------- */
[data-project="001"] { --color-bg: #FFFFFF; --color-text: #000000; --color-accent: #283583; }
[data-project="002"] { --color-bg: #FFF9F4; --color-text: #233038; --color-accent: #1C812C; }
[data-project="003"] { --color-bg: #FFFFFF; --color-text: #000000; --color-accent: #CA0005; }
[data-project="004"] { --color-bg: #FFFFFF; --color-text: #000000; --color-accent: #EE7656; }
[data-project="005"] { --color-bg: #FFF9EC; --color-text: #1F1F1F; --color-accent: #9B1C2B; }
[data-project="006"] { --color-bg: #FFF7EA; --color-text: #000000; --color-accent: #13312C; }
[data-project="007"] { --color-bg: #FFFFFF; --color-text: #000000; --color-accent: #0F4C82; }
[data-project="008"] { --color-bg: #FFFFFF; --color-text: #060606; --color-accent: #DA3541; }
[data-project="009"] { --color-bg: #FFFFFF; --color-text: #000000; --color-accent: #1A67E7; }