/* ==========================================================================
   Know Your Numbers First — design system v1.0

   LOAD ORDER (corrected 2026-08-12). Tokens first, site base last:
     <link rel="stylesheet" href="/assets/fonts/ibm-plex.css">
     <link rel="stylesheet" href="/tokens/foundations.css">
     <link rel="stylesheet" href="/tokens/components.css">
     <link rel="stylesheet" href="/styles.css">

   The previous note here said "load AFTER styles.css" and named a
   /design-system.css that never existed. Following it caused the design
   system package's own styles.css to overwrite the site's styles.css at repo
   root (commit 6cdf832), deleting all page CSS. /styles.css is the SITE BASE.
   This file and components.css are linked directly and are never imported by
   it. There is no design-system.css.

   This file is additive: it only declares tokens plus one :focus-visible rule
   and one reduced-motion block. It contains no page layout.

   Holding-state notes honoured (docs/HOLDING-STATE.md):
   - No lender identity: no NMLS numbers, no company or originator names,
     no credential claims, no co-branding, no borrowed brand palette.
   - The focus token is this site's own (#FACC15), not an inherited color.
   - Nothing here restores the removed intake funnel, testimonials or badges.
   - The calculator and FAQ components are NEW work, not lifted from
     v1.0-acm-archive. They still require counsel sign-off before going public.
   ========================================================================== */

:root {
  /* Surfaces */
  --kyn-canvas:      #0F172A;   /* 17.85:1 with white */
  --kyn-canvas-deep: #070D1A;
  --kyn-surface:     #1E293B;
  --kyn-surface-alt: #16213A;
  --kyn-border:      #334155;
  --kyn-border-soft: #2A3850;

  /* Result / metric ramp — never decorative */
  --kyn-teal:        #0D9488;   /* fills only on surface (3.92:1) */
  --kyn-teal-300:    #2DD4BF;   /* result figures, thumb, primary btn (9.57:1) */
  --kyn-teal-500:    #5EEAD4;
  --kyn-teal-700:    #0F766E;   /* teal text on light surfaces (5.48:1) */

  /* Text */
  --kyn-text:        #FFFFFF;
  --kyn-text-body:   #E2E8F0;   /* 14.68:1 on --kyn-surface */
  --kyn-text-muted:  #CBD5E1;   /* 11.10:1 on --kyn-canvas */
  --kyn-text-dim:    #94A3B8;   /* 6.96:1 — captions only */

  /* Disclosure */
  --kyn-disclosure:      #FFF8EC;
  --kyn-disclosure-edge: #E9C285;
  --kyn-disclosure-rule: #D97706;
  --kyn-disclosure-text: #3B4657;   /* 9.05:1 on the fill */
  --kyn-disclosure-head: #7A4104;   /* 6.55:1 on the fill */

  /* Focus — this site's own token */
  --kyn-focus:        #FACC15;   /* 11.64:1 on --kyn-canvas */
  --kyn-focus-invert: #0F172A;   /* inside light cards (16.90:1) */

  /* Type */
  --kyn-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --kyn-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --step--1: .875rem; --step-0: 1rem; --step-1: 1.25rem;
  --step-2: 1.5625rem; --step-3: 1.9375rem; --step-4: 3.0625rem;

  /* Space / radius / motion */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px;
  --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;
  --motion-fast: 150ms; --motion-base: 240ms;

  /* Accessibility primitives */
  --target-min: 44px;
  --focus-ring: 3px solid var(--kyn-focus);
  --focus-offset: 2px;
  --focus-halo: 0 0 0 5px rgba(255,255,255,.35);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-halo);
}
.kyn-disclosure :where(a, button):focus-visible {
  outline-color: var(--kyn-focus-invert);
  box-shadow: none;
}
.kyn-target { min-height: var(--target-min); min-width: var(--target-min); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}