/* ============================================================
   LILYPATH — Design Tokens (portable)
   Drop-in CSS custom properties for Claude Code.
   Self-contained: no local @font-face dependencies.

   FONTS — MATCHED TO app.lilypath.com, deliberately.
   Proxima Nova is licensed and bundled in neither repo, so the marketing
   site substitutes free faces and records the swap in its own
   colors_and_type.css. ASP instead pointed --font-heading/--font-body at
   'Proxima Nova' and loaded it from nowhere, so every ASP page fell
   through to Helvetica Neue while app.lilypath.com rendered Barlow +
   Mulish. Two Lilypath surfaces in different typefaces, the public Lite
   page among them. Same substitution on both now:
   - Barlow           → headings / display  (Google Fonts, free)
   - Mulish           → body                (free near-match for Proxima Nova)
   - Barlow Condensed → stat numerals       (what the design spec asks for by name)
   - Roboto           → the LILYPATH wordmark ONLY. Never headings or body.
   If licensed Proxima Nova files are ever added under /static/fonts/,
   re-add the @font-face block below and swap the two tokens back — in
   BOTH repos, in the same change.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700;900&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Barlow+Condensed:wght@500;600;700;800;900&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* If you have the Proxima Nova license, uncomment and point at your hosted files:
@font-face { font-family:'Proxima Nova'; font-weight:300; src:url('/fonts/ProximaNova-Light.woff2') format('woff2'); }
@font-face { font-family:'Proxima Nova'; font-weight:400; src:url('/fonts/ProximaNova-Regular.woff2') format('woff2'); }
@font-face { font-family:'Proxima Nova'; font-weight:600; src:url('/fonts/ProximaNova-Semibold.woff2') format('woff2'); }
@font-face { font-family:'Proxima Nova'; font-weight:800; src:url('/fonts/ProximaNova-Extrabold.woff2') format('woff2'); }
*/

:root {
  /* ---------- COLOR · raw brand ---------- */
  --lp-blue:        #284D96; /* primary brand blue */
  --lp-blue-deep:   #1B3B76; /* pressed / emphasis / gradient base */
  --lp-blue-ink:    #0E2841; /* headlines on light; dark hero bg */
  --lp-blue-600:    #395C9E; /* icon mark blue */
  --lp-blue-300:    #7A94C4;
  --lp-blue-100:    #E4EAF4;
  --lp-blue-050:    #F3F6FB;
  --lp-gray:        #4A5568; /* neutral gray — body/UI labels */

  --lp-cyan:        #00B4D8; /* accent — icons, data viz, emphasis */
  --lp-cyan-deep:   #0090B0; /* cyan text on white (AA) */
  --lp-cyan-100:    #D4F2F8;

  /* ---------- COLOR · web/product surfaces ---------- */
  --lp-web-navy:        #2B4679; /* hero & section block bg */
  --lp-web-navy-light:  #5371A7; /* card-on-navy overlay */
  --lp-web-soft-blue:   #E9EDF4; /* soft callout card / inactive pill */
  --lp-web-page:        #FFFFFF;
  --lp-web-page-alt:    #F8F9FA;
  --lp-web-footer:      #0F0E17;
  --lp-web-cta-black:   #0F0E17; /* primary CTA pill */
  --lp-web-border:      #E1E5EC;

  /* ---------- COLOR · ink neutrals (cooled toward blue) ---------- */
  --lp-ink:      #121824; /* primary text */
  --lp-ink-700:  #2A3140;
  --lp-ink-500:  #555B6B; /* muted text / captions */
  --lp-ink-400:  #7B818F; /* tertiary / subtle */
  --lp-ink-300:  #B2B6BF;
  --lp-ink-200:  #D9DCE2;
  --lp-ink-100:  #ECEEF2;
  --lp-ink-050:  #F5F6F9;
  --lp-white:    #FFFFFF;

  /* ---------- COLOR · semantic state ---------- */
  --lp-success:  #1E9E5E;
  --lp-warning:  #E9A43C;
  --lp-danger:   #D64545;

  /* ---------- SEMANTIC · surface & text roles ---------- */
  --bg:          var(--lp-white);
  --bg-subtle:   var(--lp-ink-050);
  --bg-muted:    var(--lp-ink-100);
  --bg-inverse:  var(--lp-blue-ink);
  --bg-brand:    var(--lp-blue);

  --fg:          var(--lp-ink);     /* primary text */
  --fg-muted:    var(--lp-ink-500); /* secondary text */
  --fg-subtle:   var(--lp-ink-400); /* captions */
  --fg-on-brand: var(--lp-white);
  --fg-brand:    var(--lp-blue);
  --fg-accent:   var(--lp-cyan);

  --border:        var(--lp-ink-200);
  --border-strong: var(--lp-ink-300);
  --border-brand:  var(--lp-blue);

  --focus-ring:  0 0 0 3px rgba(0, 180, 216, 0.35);

  /* ---------- TYPE · families ---------- */
  /* Barlow headings, Mulish body — the app.lilypath.com substitution for the
     licensed Proxima Nova. See the FONTS note at the top before changing these. */
  --font-display:  'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-heading:  'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --font-wordmark: 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* LILYPATH wordmark ONLY */
  --font-stat:     'Barlow Condensed', 'Barlow', system-ui, sans-serif; /* big numerals */
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tracking-wordmark: 0.02em;

  /* ---------- TYPE · weights ---------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---------- TYPE · size scale (1rem = 16px) ---------- */
  --fs-eyebrow:  0.75rem;   /* 12 — UPPERCASE tracked labels */
  --fs-caption:  0.8125rem; /* 13 — fine print */
  --fs-body-sm:  0.875rem;  /* 14 */
  --fs-body:     1rem;      /* 16 */
  --fs-body-lg:  1.125rem;  /* 18 — lead paragraphs */
  --fs-h5:       1.25rem;   /* 20 */
  --fs-h4:       1.5rem;    /* 24 */
  --fs-h3:       2rem;      /* 32 */
  --fs-h2:       2.75rem;   /* 44 */
  --fs-h1:       3.75rem;   /* 60 */
  --fs-display:  5.5rem;    /* 88 — hero stat numbers */

  /* ---------- TYPE · line height ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* ---------- TYPE · letter spacing ---------- */
  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.01em;
  --tracking-tight:   -0.02em;

  /* ---------- SPACING · 4px base grid ---------- */
  --sp-0:  0;
  --sp-1:  0.25rem; /* 4 */
  --sp-2:  0.5rem;  /* 8 */
  --sp-3:  0.75rem; /* 12 */
  --sp-4:  1rem;    /* 16 */
  --sp-5:  1.5rem;  /* 24 */
  --sp-6:  2rem;    /* 32 */
  --sp-7:  2.5rem;  /* 40 */
  --sp-8:  3rem;    /* 48 */
  --sp-9:  4rem;    /* 64 */
  --sp-10: 6rem;    /* 96 */

  /* ---------- RADII (architectural — modest) ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ---------- SHADOWS · soft, cool blue-tinted ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 40, 65, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 40, 65, 0.08);
  --shadow-md: 0 6px 20px rgba(14, 40, 65, 0.10);
  --shadow-lg: 0 18px 48px rgba(14, 40, 65, 0.14);
  --shadow-card-hover: 0 10px 28px rgba(14, 40, 65, 0.13);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);  /* house curve */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}