/* ──────────────────────────────────────────────────────────────────────────
   Codekeeper Design System — Core tokens
   Extracted from production Homepage + Software Escrow pages (Nov 2025)
   Naming bridge to shadcn/ui semantic tokens:
     --background        → --ck-bg
     --foreground        → --ck-ink
     --primary           → --ck-accent
     --primary-foreground→ --ck-ink
     --card / --popover  → --ck-white
     --muted             → --ck-alt
     --muted-foreground  → --ck-muted
     --accent            → --ck-mint
     --border / --input  → --ck-border
     --ring              → --ck-accent-text
     --radius            → 0.375rem (6px)

   Brand feeling: calm authority. The mint accent (#9BF4EF / #17B0B5) is the
   "new way" signal — use deliberately for primary CTAs, key data points,
   accent stripes, and the Software Resilience Certificate. Dark teal surfaces
   (#042f2e, #0A323C, #125467) carry authority — use them for hero sections,
   footers, and credential walls.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

/* JetBrains Mono — used by --ck-font-mono (timestamps, hex codes, code).
   Self-hosting pending: the user will upload a local file. Until then the exact
   family is delivered from the Google Fonts CDN (not a substitute — same family).
   Once a local file lands, swap the src below to fonts/JetBrainsMono-*.ttf. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPVmUsaaDhw.woff2") format("woff2");
}

:root {
  /* ── INK / TEXT ───────────────────────────────────────────────────────── */
  --ck-ink: #042f2e;            /* primary text on light surfaces; deepest brand teal */
  --ck-ink-2: #0a323c;          /* secondary heading variant */

  /* Text on light surfaces — production uses one ink at varying opacities.
     The hex values below are the opacity-blended result on --ck-bg (#f4f6f7)
     so you can use them as flat fills, OR you can use rgba(4,47,46, α) when
     the surface isn't --ck-bg. */
  --ck-text:        #042f2e;    /* 100% — headings, primary body */
  --ck-text-2:      #103938;    /* /95  — soft body */
  --ck-text-3:      #284d4c;    /* /85  — secondary copy */
  --ck-text-4:      #406160;    /* /75  — eyebrows, lead-in text, captions on light */
  --ck-text-muted:  #647f7e;    /* /60  — small print, metadata */
  --ck-text-soft:   #7c9393;    /* /50  — placeholder, disabled labels */
  --ck-text-faint:  #94a6a7;    /* /40  — disabled glyphs, dividers-as-text */

  /* Legacy aliases — kept so existing rules don't break. New work should
     prefer --ck-text-* above. */
  --ck-body: var(--ck-text-4);  /* old "body" was #4d5f6d, now /75 of ink */
  --ck-muted: var(--ck-text-muted); /* old "muted" was #758d9b, now /60 of ink */

  --ck-on-dark: #ffffff;        /* primary text on dark teal surfaces */
  --ck-on-dark-2: rgba(255,255,255,0.85); /* secondary on dark */
  --ck-on-dark-muted: rgba(255,255,255,0.65); /* muted on dark — replaces #a8c9d3 */
  --ck-on-dark-faint: rgba(255,255,255,0.45); /* faint on dark — captions, fine print */
  --ck-accent-text: #a5f3fc;    /* inline-link / "Learn more" color on dark surfaces */

  /* ── PRODUCT ACCENTS ──────────────────────────────────────────────────────
     Each product page uses its own accent triplet: a saturated text color for
     eyebrows / inline links on white, a pale tint-wash for chips and section
     backgrounds, and a pale-on-dark color used inside dark-teal hero bands.
     The mint family (--ck-mint-light / --ck-mint-lighter / --ck-accent-text)
     is the FAMILY default; the per-product tokens below override it on
     product-specific surfaces.
     ────────────────────────────────────────────────────────────────────── */

  /* Software Escrow — cyan-blue */
  --ck-prod-se-accent:       #0e94b5;
  --ck-prod-se-tint:         #D7F7F9;
  --ck-prod-se-accent-on-dark:#a5f3fc;

  /* SaaS Escrow — blue */
  --ck-prod-saas-accent:       #0c7fb5;
  --ck-prod-saas-tint:         #DCF1FF;
  --ck-prod-saas-accent-on-dark:#bae6fd;

  /* AI Escrow — teal-mint */
  --ck-prod-ai-accent:       #18b2a5;
  --ck-prod-ai-tint:         #D0F7ED;
  --ck-prod-ai-accent-on-dark:#99f6e4;

  /* Continuity Escrow — navy */
  --ck-prod-ce-accent:       #1e3a8a;
  --ck-prod-ce-tint:         #DAEFFF;
  --ck-prod-ce-accent-on-dark:#bfdbfe;

  /* Software Backup — teal-cyan */
  --ck-prod-sb-accent:       #14acb6;
  --ck-prod-sb-tint:         #D8F7F8;
  --ck-prod-sb-accent-on-dark:#a5f3fc;

  /* ── SURFACES ─────────────────────────────────────────────────────────── */
  --ck-white: #ffffff;
  --ck-bg: #f4f6f7;             /* default page bg — neutral cool gray */
  --ck-alt: #eceff1;            /* alternating section bg — slightly cooler */
  --ck-tint: #cdfaf7;           /* mint-tinted intro section bg ("New to escrow") */

  /* dark teal authority surfaces */
  --ck-deep:  #042f2e;          /* TEXT ONLY — headings + ink on light surfaces */
  --ck-dark:  #125467;          /* buttons + dark section / card backgrounds */

  /* ── ACCENT — MINT ────────────────────────────────────────────────────── */
  --ck-mint:        #17b0b5;    /* TEXT ONLY — hero accent on light ("Certified.") · key data points · inline highlights */
  --ck-mint-light:  #9bf4ef;    /* primary CTA bg · chips · badges · accent strokes */
  --ck-mint-lighter:#cdfaf7;    /* tint wash · intro sections */

  /* ── BORDERS ──────────────────────────────────────────────────────────── */
  --ck-border: #c8d3d9;         /* default 1px border on light surfaces */
  --ck-border-2: #e0e7ea;       /* lighter divider */
  --ck-border-dark: rgba(255, 255, 255, 0.10); /* divider on dark teal surfaces */

  /* ── STATUS / TIER (from product dashboard) ───────────────────────────── */
  --ck-status-active:    #1d9d6b;  /* "Active" pill */
  --ck-status-active-bg: #d1f3e3;
  --ck-status-review:    #8a4dd6;  /* "Review" pill */
  --ck-status-review-bg: #f0e6ff;
  --ck-status-setup:     #5b6b78;  /* "Setup" pill — neutral */
  --ck-status-setup-bg:  #e6ebee;
  --ck-status-draft:     #b86518;  /* "Draft" pill — amber */
  --ck-status-draft-bg:  #ffeac9;
  --ck-status-terminate: #c63d4e;  /* "Terminated" pill — muted red */
  --ck-status-terminate-bg:#ffe1e5;

  /* Verification tier colors (Validated / Verified / Certified) */
  --ck-tier-validated:#b08043;     /* bronze — Validated (free) */
  --ck-tier-verified: #a4abb1;     /* silver — Verified */
  --ck-tier-certified:#d4a534;     /* gold — Certified */

  /* Destructive (per spec: amber-leaning red, never pure) */
  --ck-destructive: #c63d4e;
  --ck-destructive-fg: #ffffff;

  /* ── RADII ────────────────────────────────────────────────────────────── */
  --ck-radius-xs: 4px;          /* small pills, checkboxes */
  --ck-radius-sm: 6px;          /* buttons, inputs — shadcn default */
  --ck-radius-md: 8px;          /* small cards, status pills inside cards */
  --ck-radius-lg: 12px;         /* nested cards */
  --ck-radius-xl: 16px;         /* primary cards, product tiles */
  --ck-radius-2xl: 20px;
  --ck-radius-full: 999px;      /* tag pills, chips */

  /* ── SHADOWS ──────────────────────────────────────────────────────────── */
  /* shadcn-equivalent: shadow-sm. Used as the default lift for white cards
     sitting on light gray backgrounds — replaces the 1px hairline border. */
  --ck-shadow-card: 0 1px 2px 0 rgba(4, 47, 46, 0.06);
  --ck-shadow-raised: 0 6px 20px -8px rgba(4, 47, 46, 0.12), 0 2px 6px rgba(4, 47, 46, 0.04);
  --ck-shadow-pop: 0 12px 36px -12px rgba(4, 47, 46, 0.22), 0 4px 12px rgba(4, 47, 46, 0.06);
  --ck-shadow-cert: 0 24px 48px -20px rgba(4, 47, 46, 0.28), 0 2px 8px rgba(4, 47, 46, 0.06);

  /* ── SPACING SCALE (8px base) ─────────────────────────────────────────── */
  --ck-space-1: 4px;
  --ck-space-2: 8px;
  --ck-space-3: 12px;
  --ck-space-4: 16px;
  --ck-space-5: 20px;
  --ck-space-6: 24px;
  --ck-space-8: 32px;
  --ck-space-10: 40px;
  --ck-space-12: 48px;
  --ck-space-16: 64px;
  --ck-space-20: 80px;
  --ck-space-24: 96px;
  --ck-space-32: 128px;

  /* Section vertical rhythm (used between marketing sections) */
  --ck-section-y: 96px;
  --ck-section-y-tight: 64px;

  /* Container width */
  --ck-container: 1200px;
  --ck-container-narrow: 880px;

  /* ── TYPE ─────────────────────────────────────────────────────────────── */
  --ck-font: "Plus Jakarta Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --ck-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — production-measured */
  --ck-size-hero:    56px;   /* H1 hero on landing */
  --ck-size-display: 48px;   /* big CTA bands — Tailwind text-5xl */
  --ck-size-h1:      44px;   /* problem / section openers */
  --ck-size-h2:      40px;   /* in-page section H2 */
  --ck-size-h3:      36px;   /* sub-section H2 */
  --ck-size-h4:      24px;   /* card title */
  --ck-size-h5:      18px;   /* FAQ / dense card title */
  --ck-size-h6:      15px;   /* tile title */
  --ck-size-eyebrow: 13px;
  --ck-size-body:    16px;
  --ck-size-body-lg: 18px;
  --ck-size-sm:      14px;
  --ck-size-xs:      12px;

  --ck-leading-tight:   1.1;
  --ck-leading-snug:    1.25;
  --ck-leading-normal:  1.5;
  --ck-leading-relaxed: 1.65;

  --ck-track-tight: -0.02em;   /* display headlines */
  --ck-track-eyebrow: 0.08em;  /* small uppercase eyebrows */

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  /* Quiet, confident. No bounce, no spring. Short durations for state, longer
     for reveals. Easing: standard cubic (in-out) for content; ease-out for
     button hover/press. */
  --ck-ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ck-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ck-dur-fast:   120ms; /* @kind other */
  --ck-dur-base:   200ms; /* @kind other */
  --ck-dur-slow:   400ms; /* @kind other */
}

/* ── BASE / RESET ──────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ck-font);
  font-size: var(--ck-size-body);
  line-height: var(--ck-leading-normal);
  color: var(--ck-body);
  background: var(--ck-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Plus Jakarta Sans ships with stylistic sets (ss01–ss06) that swap alternate
     glyph forms — single-storey `a`, alt `g`, alt `l`, etc. Brand rule: never
     use them. Force kerning on, ligatures default, all stylistic sets off,
     all character variants off, all alternates off. */
  font-feature-settings: "kern" 1,
                         "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "ss05" 0, "ss06" 0,
                         "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0,
                         "salt" 0;
  font-variant-alternates: normal;
}

/* ── SEMANTIC TYPE PRIMITIVES ──────────────────────────────────────────── */
.ck-eyebrow {
  font-size: var(--ck-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ck-track-eyebrow);
  text-transform: uppercase;
  color: var(--ck-deep);
}
.ck-hero {
  font-size: var(--ck-size-hero);
  line-height: var(--ck-leading-tight);
  letter-spacing: var(--ck-track-tight);
  font-weight: 700;
  color: var(--ck-ink);
  text-wrap: balance;
  margin: 0 0 var(--ck-space-5);
}
.ck-h1 { font-size: var(--ck-size-h1); line-height: var(--ck-leading-tight);  letter-spacing: var(--ck-track-tight); font-weight: 700; color: var(--ck-ink); text-wrap: balance; margin: 0 0 var(--ck-space-5); }
.ck-h2 { font-size: var(--ck-size-h2); line-height: var(--ck-leading-snug);   letter-spacing: var(--ck-track-tight); font-weight: 700; color: var(--ck-ink); text-wrap: balance; margin: 0 0 var(--ck-space-4); }
.ck-h3 { font-size: var(--ck-size-h3); line-height: var(--ck-leading-snug);   font-weight: 700; color: var(--ck-ink); margin: 0 0 var(--ck-space-4); }
.ck-h4 { font-size: var(--ck-size-h4); line-height: var(--ck-leading-snug);   font-weight: 600; color: var(--ck-ink); margin: 0 0 var(--ck-space-3); }
.ck-h5 { font-size: var(--ck-size-h5); line-height: var(--ck-leading-snug);   font-weight: 600; color: var(--ck-ink); margin: 0 0 var(--ck-space-2); }
.ck-h6 { font-size: var(--ck-size-h6); line-height: var(--ck-leading-snug);   font-weight: 600; color: var(--ck-ink); margin: 0 0 var(--ck-space-2); }
.ck-p  { font-size: var(--ck-size-body);  line-height: var(--ck-leading-relaxed); color: var(--ck-body); margin: 0 0 var(--ck-space-4); }
.ck-lead { font-size: var(--ck-size-body-lg); line-height: var(--ck-leading-relaxed); color: var(--ck-body); margin: 0 0 var(--ck-space-5); }
.ck-small { font-size: var(--ck-size-sm); line-height: var(--ck-leading-normal); color: var(--ck-muted); }
.ck-mono  { font-family: var(--ck-font-mono); font-size: 13px; color: var(--ck-ink); }

/* On dark teal surfaces, headings invert and body softens toward white */
.ck-on-dark { color: var(--ck-on-dark); }
.ck-on-dark .ck-h1,
.ck-on-dark .ck-h2,
.ck-on-dark .ck-h3,
.ck-on-dark .ck-h4,
.ck-on-dark .ck-hero { color: var(--ck-on-dark); }
.ck-on-dark .ck-p,
.ck-on-dark .ck-lead { color: var(--ck-on-dark-muted); }
.ck-on-dark .ck-eyebrow { color: var(--ck-accent-text); }

/* ── SEMANTIC SURFACE / SECTION HELPERS ────────────────────────────────── */
.ck-surface-bg   { background: var(--ck-bg); }
.ck-surface-alt  { background: var(--ck-alt); }
.ck-surface-tint { background: var(--ck-tint); }
.ck-surface-dark { background: var(--ck-dark); color: var(--ck-on-dark); }
.ck-surface-deep { background: var(--ck-dark); color: var(--ck-on-dark); }

.ck-container { max-width: var(--ck-container); margin: 0 auto; padding: 0 var(--ck-space-8); }
.ck-section   { padding: var(--ck-section-y) 0; }
.ck-section-tight { padding: var(--ck-section-y-tight) 0; }

/* shadcn-style aliases — set these in any consuming app to bridge naming */
:root {
  --background: var(--ck-bg);
  --foreground: var(--ck-ink);
  --primary: var(--ck-accent, var(--ck-mint-light));
  --primary-foreground: var(--ck-ink);
  --card: var(--ck-white);
  --popover: var(--ck-white);
  --muted: var(--ck-alt);
  --muted-foreground: var(--ck-muted);
  --accent: var(--ck-mint-light);
  --border: var(--ck-border);
  --input: var(--ck-border);
  --ring: var(--ck-accent-text);
  --radius: 0.375rem;
}