/* JKCS brand tokens — v1 (Sept 2026). Include on every JKCS page. */

:root {
  --navy:   #0B2545;   /* Depth Navy   */
  --blue:   #1B6CA8;   /* Signal Blue  */
  --mint:   #2EC4A0;   /* Circuit Mint */
  --teal:   #3D7A8A;   /* Slate Teal   */
  --forest: #0F5C4A;   /* Forest       */
  --ink:    #0B0F14;
  --paper:  #FFFFFF;
  --mist:   #F3F6F9;
  --line:   #D8E0E8;

  --font-head: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 12px;
  --shadow: 0 8px 24px rgba(11, 37, 69, .12);
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.55; }
h1, h2, h3 { font-family: var(--font-head); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
p  { margin: 0 0 1em; max-width: 62ch; }
code, .mono { font-family: var(--font-mono); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h1, .section--navy h2 { color: #fff; }
.section--mist { background: var(--mist); }

.btn { display: inline-block; padding: 14px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 2px solid transparent; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: #155a8f; }
.btn--mint { background: var(--mint); color: var(--navy); }
.btn--ghost { border-color: currentColor; color: inherit; }

.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.card h3 { font-size: 1.15rem; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(46,196,160,.15); color: var(--forest); font-size: .85rem; font-weight: 600; }

input, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
label { font-weight: 600; display: block; margin: 12px 0 6px; }

@media (max-width: 640px) { .section { padding: 48px 0; } }