/* ============================================
   UNDERNEATH.CLOUD — Design Tokens (READABLE VERSION)
   Single source of truth for all visual decisions.
   Fixed to be actually readable on desktop.
   ============================================ */

/* --- COLORS --- */
:root {
  /* Paper & Ink (Primary Palette) */
  --paper:           #f4efe4;
  --paper-warm:      #f0ebe0;
  --ink:             #0d0d0d;
  --ink-body:        #1a1a18;
  --ink-light:       #333;
  --ink-dim:         #666;
  --ink-faint:       #999;

  /* Rules & Borders */
  --rule:            #c8c2b6;
  --rule-dark:       #0d0d0d;
  --border-thin:     1px solid var(--rule);
  --border-thick:    3px solid var(--ink);
  --border-ink:      1px solid var(--ink);

  /* Accent Colors */
  --red:             #c0392b;
  --red-light:       #e74c3c;
  --blue:            #1a5f7a;
  --blue-light:      #3498db;
  --green:           #2e7d32;
  --green-light:     #27ae60;

  /* Backgrounds */
  --bg-subtle:       rgba(0,0,0,2%);
  --bg-light:        rgba(0,0,0,3%);
  --bg-overlay:      rgba(13,13,13,0.88);

  /* Shadows */
  --shadow-none:     none;
  --shadow-subtle:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-medium:   0 2px 8px rgba(0,0,0,0.12);
  --shadow-heavy:    0 4px 16px rgba(0,0,0,0.16);
}

/* --- TYPOGRAPHY --- */
:root {
  /* Font Families */
  --font-headline:   'Playfair Display', Georgia, serif;
  --font-body:       'Libre Baskerville', Georgia, serif;
  --font-label:      'Source Serif 4', Georgia, serif;
  --font-sans:       'Libre Baskerville', Georgia, serif;

  /* Font Sizes — Headlines (READABLE) */
  --text-hero:       clamp(2rem, 5vw, 4rem);
  --text-h1:         2.5rem;
  --text-h2:         2rem;
  --text-h3:         1.5rem;
  --text-h3-small:   1.3rem;

  /* Font Sizes — Body (READABLE) */
  --text-body:       16px;
  --text-body-lg:    17px;
  --text-body-sm:    15px;
  --text-body-xs:    14px;

  /* Font Sizes — Labels & Meta (READABLE) */
  --text-label:      12px;
  --text-caption:    13px;
  --text-caption-sm: 11px;
  --text-mast-sub:   12px;
  --text-footer:     11px;

  /* Font Sizes — Display */
  --text-quote:      1.3rem;
  --text-quote-sm:   1.1rem;
  --text-opinion:    1.4rem;

  /* Line Heights */
  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-normal:  1.4;
  --leading-relaxed: 1.5;
  --leading-loose:   1.6;
  --leading-body:    1.6;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-label:  0.1em;
  --tracking-mast:   0.2em;
  --tracking-tag:    0.15em;
  --tracking-head:   0.02em;

  /* Font Weights */
  --weight-normal:   400;
  --weight-medium:   600;
  --weight-bold:     700;
  --weight-black:    900;
}

/* --- SPACING --- */
:root {
  --space-micro:    4px;
  --space-xxs:      8px;
  --space-xs:       12px;
  --space-sm:       16px;
  --space-md:       20px;
  --space-base:     24px;
  --space-lg:       32px;
  --space-xl:       48px;
  --space-2xl:      64px;

  /* Padding Presets */
  --pad-panel:      24px 32px;
  --pad-panel-tight: 20px 24px;
  --pad-panel-alt:  24px 32px;
  --pad-quote:      24px;
  --pad-footer:     16px;
}

/* --- LAYOUT --- */
:root {
  --max-width:      100%;
  --col-gap:        20px;
  --col-rule:       1px solid var(--rule);
  --twocol-gap:     20px;
}

/* --- IMAGES --- */
:root {
  --img-filter-default:   contrast(1.04) saturate(0.35);
  --img-filter-warm:      contrast(1.06) saturate(0.4);
  --img-filter-portrait:  contrast(1.05) saturate(0.25);
  --img-filter-lebanon:   contrast(1.04) saturate(0.38);

  --img-height-sm:   200px;
  --img-height-md:   280px;
  --img-height-lg:   360px;
  --img-height-xl:   440px;
}

/* --- ANIMATION --- */
:root {
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;
}

/* --- RESPONSIVE BREAKPOINTS (for reference — used in @media) --- */
/*  --bp-mobile:    500px;   */
/*  --bp-tablet:    768px;   */
/*  --bp-desktop:   1200px;  */
/*  --bp-xl:        1600px;  */