/* ============================================================
   PERSONAL STAKES — Design Tokens
   Single source of truth for all UI implementation.
   Import this file first in any project.
   ============================================================ */

:root {

  /* ── COLOR ── */

  /* Backgrounds */
  --color-bg-primary:    #fdfaf5;   /* Parchment — main page background */
  --color-bg-secondary:  #f4f0e8;   /* Off-white — tinted sections, cards */
  --color-bg-inverse:    #1a1814;   /* Ink — dark sections, hero variants */

  /* Text */
  --color-text-primary:  #1a1814;   /* Ink — headings, body */
  --color-text-secondary:#3a3630;   /* Ink Mid — supporting body */
  --color-text-tertiary: #7a7468;   /* Ink Soft — captions, meta */
  --color-text-faint:    #b8b2a8;   /* Ink Faint — placeholders, disabled */
  --color-text-inverse:  #fdfaf5;   /* Parchment — text on dark */

  /* Brand Accent */
  --color-accent:        #c0392b;   /* Signal Red — primary accent */
  --color-accent-soft:   #d44332;   /* Red Soft — accent on dark backgrounds only */

  /* Rules & Borders */
  --color-rule:          #ddd8cc;   /* Dividers, borders, table rules */
  --color-rule-strong:   #1a1814;   /* Strong borders, section separators */


  /* ── TYPOGRAPHY ── */

  /* Font Families */
  --font-display:  'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body:     'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Font Sizes — fluid scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   80px;

  /* Fluid headline — clamps for responsive display */
  --text-hero:      clamp(52px, 8vw, 96px);
  --text-h1:        clamp(36px, 5vw, 64px);
  --text-h2:        clamp(28px, 3.5vw, 44px);
  --text-h3:        clamp(20px, 2.5vw, 28px);
  --text-pullquote: clamp(20px, 2.5vw, 32px);

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line Heights */
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.85;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.22em;


  /* ── SPACING ── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;


  /* ── LAYOUT ── */

  --max-width-content:  760px;   /* Long-form reading column */
  --max-width-wide:     1200px;  /* Full layout max */
  --max-width-narrow:   560px;   /* Tight column, lede, pull quotes */

  --gutter:             48px;    /* Page horizontal padding — desktop */
  --gutter-mobile:      20px;    /* Page horizontal padding — mobile */

  --nav-height:         52px;


  /* ── BORDERS ── */

  --border-thin:   1px solid var(--color-rule);
  --border-strong: 1px solid var(--color-rule-strong);
  --border-accent: 2px solid var(--color-accent);


  /* ── SHADOWS ── */

  --shadow-sm:  0 1px 3px rgba(26,24,20,0.06);
  --shadow-md:  0 4px 16px rgba(26,24,20,0.08);
  --shadow-lg:  0 12px 40px rgba(26,24,20,0.12);


  /* ── TRANSITIONS ── */

  --transition-fast:   0.12s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.35s ease;


  /* ── Z-INDEX ── */

  --z-base:     1;
  --z-dropdown: 50;
  --z-sticky:   80;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;

}


/* ============================================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================================ */

/* Display / Headlines */
.ps-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.ps-display em,
.ps-headline em {
  font-style: italic;
  color: var(--color-accent);
}

/* Body copy */
.ps-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Label / mono utility */
.ps-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Accent label */
.ps-label-accent {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Pull quote */
.ps-pullquote {
  font-family: var(--font-body);
  font-size: var(--text-pullquote);
  font-weight: var(--weight-light);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  border-left: var(--border-accent);
  padding-left: var(--space-6);
}

/* Section rule — red top border on labels */
.ps-section-rule {
  border-top: var(--border-accent);
  padding-top: var(--space-3);
}


/* ============================================================
   COMPONENT PATTERNS
   ============================================================ */

/* Nav */
.ps-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--color-bg-primary);
  border-bottom: var(--border-strong);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  z-index: var(--z-nav);
}

/* Page wrapper */
.ps-page {
  margin-top: var(--nav-height);
  background: var(--color-bg-primary);
}

/* Section */
.ps-section {
  padding: var(--space-24) var(--gutter);
  border-bottom: var(--border-strong);
}

.ps-section--tinted {
  background: var(--color-bg-secondary);
}

.ps-section--inverse {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

/* Content column */
.ps-col-content {
  max-width: var(--max-width-content);
}

.ps-col-wide {
  max-width: var(--max-width-wide);
}

/* Rule divider */
.ps-rule {
  border: none;
  border-top: var(--border-thin);
  margin: var(--space-8) 0;
}

.ps-rule--strong {
  border-top: var(--border-strong);
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/*
  Use these in media queries:
  Mobile:  max-width: 640px
  Tablet:  max-width: 960px
  Desktop: min-width: 961px

  Example:
  @media (max-width: 960px) {
    .ps-nav { padding: 0 var(--gutter-mobile); }
    .ps-section { padding: 56px var(--gutter-mobile); }
  }
*/


/* ============================================================
   GOOGLE FONTS IMPORT
   Add this to <head> before using these tokens:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,300;1,8..60,400;1,8..60,600&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
   ============================================================ */