/* Respellion Design System — tokens */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Colors — core */
  --teal:        #1F5560;
  --teal-900:    #183E46;
  --teal-700:    #2A6C78;
  --purple:      #5C1DD8;
  --purple-700:  #4A17AE;
  --sage:        #CDD8BB;
  --peri:        #AFC0FF;
  --tan:         #B1A089;
  --cream:       #ECE9E9;
  --ink:         #3C3A3A;
  --paper:       #FFFFFF;

  /* Semantic */
  --fg:          var(--ink);
  --fg-muted:    rgba(60,58,58,0.65);
  --fg-subtle:   rgba(60,58,58,0.45);
  --bg:          var(--paper);
  --bg-warm:     var(--cream);
  --bg-dark:     var(--teal);
  --accent:      var(--purple);
  --accent-soft: var(--peri);
  --success:     var(--sage);

  /* Type stacks */
  --font-sans:   "Space Grotesk", system-ui, sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, monospace;

  /* Type scale */
  --t-display:   clamp(44px, 8vw, 112px);
  --t-h1:        clamp(40px, 5.5vw, 72px);
  --t-h2:        clamp(32px, 4vw, 52px);
  --t-h3:        26px;
  --t-lead:      19px;
  --t-body:      17px;
  --t-small:     15px;
  --t-label:     11px;      /* JetBrains Mono, uppercase, letterspacing .14em */
  --label-ls:    0.14em;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;

  /* Radii */
  --r-sm:   12px;
  --r-md:   22px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-2xl:  56px;
  --r-pill: 9999px;
  --r-org:  48% 52% 62% 38% / 50% 44% 56% 50%;
  --r-org2: 60% 40% 45% 55% / 38% 62% 38% 62%;

  /* Shadow */
  --shadow-pill: 0 14px 40px rgba(24,62,70,0.35);
  --shadow-soft: 0 12px 40px rgba(0,0,0,0.08);

  /* Layout */
  --max: 1320px;

  /* Section padding rhythm */
  --sec-y: clamp(80px, 10vw, 144px);
}

/* Semantic element mappings */
body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
h1 { font: 700 var(--t-h1)/0.98 var(--font-sans); letter-spacing: -0.01em; color: var(--teal); }
h2 { font: 700 var(--t-h2)/1.0 var(--font-sans); letter-spacing: -0.01em; color: var(--teal); }
h3 { font: 700 var(--t-h3)/1.15 var(--font-sans); color: var(--teal); }
p  { font: 400 var(--t-body)/1.6 var(--font-sans); }
code, .mono { font-family: var(--font-mono); }
.label { font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: var(--label-ls); text-transform: uppercase; }

::selection { background: var(--purple); color: var(--paper); }