/* theme.css — PT THE ENTERTAINMENT MEDIA — Cinematic Theme */

:root {
  /* Surface Palette - Deep Navy & Charcoal */
  --color-surface:                    #090f20; /* Slightly richer */
  --color-surface-dim:                #060a15;
  --color-surface-bright:             #0b1328;
  --color-surface-container-lowest:   #040710;
  --color-surface-container-low:      #060a15;
  --color-surface-container:          #0b1328;
  --color-surface-container-high:     #131e36;
  --color-surface-container-highest:  #1a2640;
  --color-surface-variant:            #243045;

  /* On-Surface */
  --color-on-surface:                 #FDFBF7; /* Warm off-white */
  --color-on-surface-variant:         #a1abb8;

  /* Outline */
  --color-outline:                    #364455;
  --color-outline-variant:            #243045;

  /* Primary (Graphite/Charcoal) */
  --color-primary:                    #010b13;
  --color-on-primary:                 #ffffff;

  /* Accent (Gold) */
  --color-gold:                       #CFA930; /* Slightly richer gold */
  --color-gold-light:                 #E8C65A;
  --color-gold-dark:                  #9E801D;

  /* Secondary (Cinematic Blue) */
  --color-secondary:                  #243c5a;
  --color-on-secondary:               #ffffff;

  /* Background */
  --color-background:                 #040710;
  --color-on-background:              #FDFBF7;

  /* Spacing */
  --space-unit:           4px;
  --space-gutter:         16px;
  --space-margin-sm:      32px;
  --space-margin-lg:      64px;
  --space-section-gap:    160px; /* Increased luxury whitespace */

  /* Typography Scale */
  --font-sans:            'Plus Jakarta Sans', sans-serif;
  --font-serif:           'Playfair Display', serif;
  --font-mono:            'JetBrains Mono', monospace;

  /* Shape */
  --radius:               0px;

  /* Max content width */
  --max-content:          1600px; /* Wider for editorial asymmetry */
}

/* Typography utility classes */
.t-display-hero {
  font-family: var(--font-serif);
  font-size: clamp(48px, 8vw, 100px); /* Reduced from 140px */
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.t-display-xl {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 80px); /* Reduced from 96px */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.t-display-lg {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 56px); /* Reduced from 64px */
  font-weight: 500;
  line-height: 1.15;
}

.t-headline-lg {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px); /* Reduced from 48px */
  font-weight: 500;
  line-height: 1.25;
}

.t-headline-mobile {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
}

.t-title-md {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400; /* Lighter, more premium */
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400; /* Increased from 300 for readability */
  line-height: 1.8; /* Looser line height for editorial feel */
  letter-spacing: 0.01em;
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400; /* Increased from 300 for readability */
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.t-label-caps {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600; /* Increased from 500 */
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.t-mono-data {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500; /* Increased from 400 */
  line-height: 1.5;
  letter-spacing: 0.05em;
}