/* ============================
   tokens.css — design tokens
   Palette, typography base, reset, motion
   Source of truth: docs/CI-design-system.md
   ============================ */

:root{
  /* Palette — paper family */
  --paper:    #FAF7F0;
  --paper-2:  #F4EFE2;
  --paper-3:  #E5DBC2;

  /* Palette — ink family */
  --ink:      #0A1628;
  --ink-2:    #1E293B;

  /* Palette — navy (primary brand) */
  --navy:     #0F2E5F;
  --navy-2:   #1E40AF;
  --navy-3:   #2563EB;

  /* Palette — gold (accent) */
  --gold:     #C8932A;
  --gold-2:   #9B6F1C;
  --gold-light:#E9B949;
  --gold-soft:#FBF1D8;

  /* Palette — text helpers */
  --muted:    #6B6258;
  --muted-2:  #A39A8B;
  --border:   #D9D1BD;
  --border-2: #C2B89E;
  --surface:  #FFFFFF;

  /* Shadows — soft, navy-tinted */
  --shadow-1: 0 1px 2px rgba(15,46,95,0.04), 0 4px 12px rgba(15,46,95,0.04);
  --shadow-2: 0 4px 12px rgba(15,46,95,0.06), 0 24px 48px rgba(15,46,95,0.08);
  --shadow-3: 0 8px 20px rgba(15,46,95,0.08), 0 40px 80px rgba(15,46,95,0.12);

  /* Font stacks */
  --font-display: 'Inter','Anuphan',sans-serif;
  --font-body:    'Inter','Anuphan',sans-serif;
  --font-mono:    'Space Mono',monospace;
}

/* ============================
   Reset + base
   ============================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;line-height:1.55;letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  min-height:100vh;
  background-image:
    radial-gradient(circle at 92% 8%, rgba(200,147,42,0.05) 0%, transparent 45%),
    radial-gradient(circle at 8% 92%, rgba(15,46,95,0.04) 0%, transparent 45%);
  background-attachment:fixed;
  position:relative;
}
/* Paper grain texture overlay */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.025 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  opacity:0.7;mix-blend-mode:multiply;
}
button,a{font-family:inherit;cursor:pointer;color:inherit;text-decoration:none;border:none;background:none}
button:focus,a:focus,input:focus,select:focus,textarea:focus{outline:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:3px}
img{max-width:100%;display:block}

.mono{font-family:var(--font-mono);letter-spacing:0.06em}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ============================
   Typography scale (display/heading/lede/eyebrow)
   ============================ */
.eyebrow{
  font-family:var(--font-mono);font-size:0.72rem;
  letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-2);
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:'';display:inline-block;width:30px;height:1px;background:var(--gold-2)}
.eyebrow.center::after{content:'';display:inline-block;width:30px;height:1px;background:var(--gold-2)}

.h-display{
  font-family:var(--font-display);
  font-weight:200;
  font-size:clamp(3rem, 9vw, 7rem);
  line-height:0.98;letter-spacing:-0.045em;color:var(--ink);
}
.h-display em{color:var(--navy);font-style:italic;font-weight:300}
.h-display .gold{color:var(--gold-2);font-style:italic;font-weight:300}

.h-large{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(2.4rem, 6.5vw, 4.8rem);
  line-height:1.02;letter-spacing:-0.035em;color:var(--ink);
}
.h-large em{color:var(--navy);font-style:italic;font-weight:400}
.h-large .gold{color:var(--gold-2);font-style:italic;font-weight:400}

.lede{
  font-size:1.15rem;color:var(--muted);max-width:540px;line-height:1.6;font-weight:300;
}
.lede em{color:var(--ink-2);font-style:italic;font-weight:400}

/* Sr-only utility */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}