/* ============================================================
   Keysat — palette.css (CANONICAL design tokens as CSS custom properties)
   "Software Licensing for Bitcoin Creators"
   Navy + cream, paper texture, classical type.

   Single canonical stylesheet, derived from design/tokens.tokens.json.
   Surfaces (landing, docs, admin SPA) should @import or inline THIS file
   rather than keep private copies — see the "shared token source" item in
   ROADMAP.md. Keep this and the tokens JSON in sync; never fork a one-off copy.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  /* Primary navy — pulled from the wordmark */
  --navy-950: #0E1F33;
  --navy-900: #142A47;
  --navy-800: #1E3A5F;   /* core brand navy */
  --navy-700: #2A4A75;
  --navy-600: #3A5C8A;
  --navy-500: #5074A1;
  --navy-400: #7892B8;
  --navy-300: #A6B7CF;
  --navy-200: #CBD5E2;
  --navy-100: #E4EAF1;
  --navy-50:  #F2F5F9;

  /* Cream / paper — the background tone of the logo card */
  --cream-50:  #FBF9F2;
  --cream-100: #F5F1E8;   /* core cream */
  --cream-200: #EDE7D7;
  --cream-300: #E1D8C0;
  --cream-400: #C9BC9A;

  /* Gold / tan — the inner key border */
  --gold-700: #8A6F3D;
  --gold-600: #A88652;
  --gold-500: #BFA068;   /* core gold accent */
  --gold-400: #D4B985;
  --gold-300: #E5CFA5;
  --gold-200: #F0E2C5;

  /* Ink — dark text */
  --ink-900: #0E1F33;
  --ink-700: #2C3E54;
  --ink-500: #5A6B7F;
  --ink-400: #7E8C9D;
  --ink-300: #A4AEBB;

  /* Semantic */
  --success: #2D7A5F;
  --success-bg: #E3F0EA;
  --warning: #B8861F;
  --warning-bg: #F7EFD7;
  --danger:  #B23A3A;
  --danger-bg: #F4E0E0;
  --info:    var(--navy-700);
  --info-bg: var(--navy-100);

  /* ---------- Semantic surface tokens ---------- */
  --bg-page:    var(--cream-100);   /* default page bg */
  --bg-paper:   var(--cream-50);    /* lighter paper */
  --bg-elev:    #FFFFFF;            /* elevated surface (cards on cream) */
  --bg-inverse: var(--navy-900);    /* dark surface */
  --bg-tint:    var(--cream-200);   /* tinted band/section */

  --fg-1: var(--ink-900);  /* primary text */
  --fg-2: var(--ink-700);  /* secondary text */
  --fg-3: var(--ink-500);  /* tertiary / meta */
  --fg-4: var(--ink-400);  /* disabled / hint */
  --fg-on-navy: var(--cream-50);
  --fg-on-gold: var(--navy-900);

  --border-1: rgba(14, 31, 51, 0.12);   /* hairline on cream */
  --border-2: rgba(14, 31, 51, 0.20);   /* card border */
  --border-3: rgba(14, 31, 51, 0.35);   /* focus / strong */
  --border-on-navy: rgba(245, 241, 232, 0.18);

  --accent: var(--navy-800);
  --accent-hover: var(--navy-900);
  --accent-press: var(--navy-950);
  --accent-soft: var(--navy-100);

  --gold: var(--gold-500);
  --gold-hover: var(--gold-600);

  /* ---------- Type families ---------- */
  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-display-xl: clamp(56px, 6vw, 88px);
  --fs-display:    clamp(40px, 4.5vw, 64px);
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-body-sm: 13.5px;
  --fs-meta: 12px;
  --fs-mono: 13px;

  /* ---------- Line heights ---------- */
  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --lh-tight: 1.25;

  /* ---------- Letter spacing ---------- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  /* Quiet, layered shadows — paper, not glassy */
  --shadow-xs: 0 1px 1px rgba(14,31,51,0.04);
  --shadow-sm: 0 1px 2px rgba(14,31,51,0.06), 0 1px 1px rgba(14,31,51,0.03);
  --shadow-md: 0 2px 4px rgba(14,31,51,0.06), 0 4px 12px rgba(14,31,51,0.06);
  --shadow-lg: 0 4px 8px rgba(14,31,51,0.07), 0 12px 32px rgba(14,31,51,0.10);
  --shadow-xl: 0 8px 16px rgba(14,31,51,0.10), 0 24px 64px rgba(14,31,51,0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(14,31,51,0.05);
  --ring-focus: 0 0 0 3px rgba(30,58,95,0.25);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   Paper texture — subtle grain on cream surfaces
   ============================================================ */
.paper-texture {
  background-color: var(--bg-page);
  background-image:
    radial-gradient(rgba(14,31,51,0.025) 1px, transparent 1px),
    radial-gradient(rgba(138,111,61,0.022) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
}
.paper-texture-strong {
  background-color: var(--bg-page);
  background-image:
    radial-gradient(rgba(14,31,51,0.04) 1px, transparent 1.4px),
    radial-gradient(rgba(138,111,61,0.035) 1px, transparent 1.2px);
  background-size: 3px 3px, 7px 7px;
}

/* ============================================================
   Element defaults — drop these into a body class .keysat
   ============================================================ */
.keysat {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

.keysat h1, .keysat .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.keysat h2, .keysat .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.keysat h3, .keysat .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.keysat h4, .keysat .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0;
}
.keysat h5, .keysat .h5 {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0;
}
.keysat .display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: -0.022em;
}
.keysat .display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: -0.022em;
}
.keysat .wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.keysat .eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-700);
}
.keysat p { margin: 0 0 1em 0; color: var(--fg-2); }
.keysat .lead {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--fg-2);
}
.keysat .meta {
  font-size: var(--fs-meta);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.keysat code, .keysat .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-feature-settings: 'ss02';
}
.keysat a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.keysat a:hover { color: var(--accent-hover); }