/* ========================================
   Design Tokens
   ======================================== */

@font-face {
  font-family: 'Eterne Display Penumbra';
  src: url('fonts/EterneDisplay-Penumbra.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {

  /* --- Colors ---
     Text on bg: #111111 on #FFFFFF = 18.9:1 (AAA)
  */
  --color-background:       #FFFFFF;
  --color-text-primary:     #111111;
  --color-text-secondary:   #6B6B6B;
  --color-card-border:      rgba(255, 255, 255, 0.2);
  --color-scrim:            rgba(0, 0, 0, 0.25);
  --color-modal-overlay:    rgba(0, 0, 0, 0.65);
  --color-modal-body-bg:    #1C1C1C;
  --color-modal-hero-bg:    #D0CEC6;
  --color-caption:          #999999;
  --nav-blur:               16px;
  --nav-height:             72px;

  --bottom-blur-height:     120px;
  --bottom-blur-amount:     6px;

  --radius-card:            24px;

  /* --- Spacing (8px grid) --- */
  --space-xs:    8px;
  --space-sm:    16px;
  --space-md:    24px;
  --space-lg:    32px;
  --space-xl:    48px;
  --space-2xl:   64px;
  --space-3xl:   96px;
  --space-4xl:   128px;

  /* --- Layout --- */
  --container-max:          1440px;
  --container-padding:      var(--space-md);

  /* --- Font Families --- */
  --font-sans:              'Inter', sans-serif;
  --font-serif:              'Eterne Display Penumbra', 'Source Serif Pro', Georgia, serif;
  --font-mono:              'Roboto Mono', monospace;

  /* --- Font Weights --- */
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;

  /* --- Type Scale (mobile-first) --- */
  --text-hero-size:         48px;
  --text-hero-line-height:  1.08;

  --text-h2-size:           28px;
  --text-h2-line-height:    1.2;

  --text-intro-size:        20px;
  --text-intro-line-height: 1.5;

  --text-body-size:         16px;
  --text-body-line-height:  1.6;

  --text-nav-size:          13px;
  --text-nav-line-height:   1.4;
  --text-nav-letter-spacing: 0.06em;

  --text-card-title-size:   22px;
  --text-card-title-line-height: 1.2;
  --text-mono-size:         13px;
  --text-mono-line-height:  1.6;
}

/* --- Type Scale (desktop) --- */
@media (min-width: 768px) {
  :root {
    --text-hero-size:       104px;
    --text-h2-size:         40px;
    --text-body-size:       18px;
    --text-intro-size:      44px;
    --text-intro-line-height: 1.35;
    --container-padding:    80px;
    --text-card-title-size: 28px;
    --text-mono-size:       14px;
  }
}

/* --- Rotating color themes --- */
:root[data-theme="1"] {
  --color-background:     #211E6E;
  --color-text-primary:   #DFDEFF;
  --color-text-secondary: rgba(223, 222, 255, 0.65);
}

:root[data-theme="2"] {
  --color-background:     #2D542F;
  --color-text-primary:   #F2FF41;
  --color-text-secondary: rgba(242, 255, 65, 0.65);
}

:root[data-theme="3"] {
  --color-background:     #5F0B0B;
  --color-text-primary:   #FFBFBF;
  --color-text-secondary: rgba(255, 191, 191, 0.65);
}