/* ================================================
   JE Coaching Co. — tokens
   ================================================ */
:root {
  /* Palette */
  --paper:       #FAF8F4;
  --paper-soft:  #F1EDE5;
  --ink:         #0E0D0B;
  --ink-soft:    #1B1A17;
  --ink-mute:    rgba(14, 13, 11, 0.56);
  --ink-faint:   rgba(14, 13, 11, 0.32);
  --rule:        rgba(14, 13, 11, 0.10);
  --rule-strong: rgba(14, 13, 11, 0.18);

  --accent:      #0E0D0B;
  --accent-on:   var(--paper);

  --dark:        #0E0D0B;
  --dark-soft:   #161410;
  --dark-on:     var(--paper);
  --dark-mute:   rgba(250, 248, 244, 0.56);
  --dark-faint:  rgba(250, 248, 244, 0.30);
  --dark-rule:   rgba(250, 248, 244, 0.12);

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Space */
  --frame:        clamp(16px, 1.6vw, 28px);   /* outer frame margin (sides) */
  --gutter:       clamp(20px, 2.4vw, 40px);   /* inside-section padding */
  --pad-section:  clamp(72px, 8vw, 128px);
  --bento-gap:    clamp(8px, 0.8vw, 14px);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.3s;
  --t-med:  0.6s;
  --t-slow: 0.85s;
}

* { box-sizing: border-box; }
*::selection { background: var(--ink); color: var(--paper); }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { padding: 0 var(--frame); }   /* outer frame margin (full-width with breathing) */

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }