/* ============================================================
   LodgeKeeper — Colors & Type
   Load this file once in any artifact: <link rel="stylesheet" href="colors_and_type.css">
   ------------------------------------------------------------
   Palette philosophy: a softened teal primary anchors the
   brand for calm, premium operational SaaS. Slate carries
   the secondary anchor for admin/back-office surfaces.
   Everything else is a cool slate scale on a near-white
   page background.
   ============================================================ */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== Brand palette — softened teal primary ===== */
  --lk-lodge-50:  #D7F5F1;
  --lk-lodge-100: #B8EDE5;
  --lk-lodge-200: #99E6DC;
  --lk-lodge-300: #5EEAD4;
  --lk-lodge-400: #2DD4BF;
  --lk-lodge-500: #0FA89A;   /* primary teal */
  --lk-lodge-600: #0B8D82;   /* hover */
  --lk-lodge-700: #0FA89A;   /* primary anchor (kept on -700 for legacy refs) */
  --lk-lodge-800: #0B8D82;
  --lk-lodge-900: #086B62;

  /* ===== Action (kept token name; now matches the brand teal so links/CTAs stay on-brand) ===== */
  --lk-sky-50:  #D7F5F1;
  --lk-sky-100: #B8EDE5;
  --lk-sky-300: #5EEAD4;
  --lk-sky-500: #0FA89A;
  --lk-sky-600: #0B8D82;
  --lk-sky-700: #086B62;

  /* ===== Hearth — folded into teal (was warm terracotta) ===== */
  --lk-hearth-50:  #D7F5F1;
  --lk-hearth-100: #B8EDE5;
  --lk-hearth-300: #5EEAD4;
  --lk-hearth-500: #0FA89A;
  --lk-hearth-600: #0B8D82;
  --lk-hearth-700: #0B8D82;

  /* ===== Slate (neutrals) — cool slate per new brand ===== */
  --lk-slate-50:  #F8FAFC;
  --lk-slate-100: #F1F5F9;
  --lk-slate-200: #E5E7EB;
  --lk-slate-300: #CBD5E1;
  --lk-slate-400: #94A3B8;
  --lk-slate-500: #64748B;
  --lk-slate-600: #475569;
  --lk-slate-700: #334155;   /* secondary anchor */
  --lk-slate-800: #1E293B;   /* secondary hover / deep */
  --lk-slate-900: #0F172A;

  /* ===== Surfaces ===== */
  --lk-paper:        #F6F7F9;   /* page background */
  --lk-paper-deep:   #F1F5F9;
  --lk-surface:      #FFFFFF;   /* card surface */
  --lk-surface-alt:  #FAFBFC;
  --lk-ink:          #0F172A;   /* primary text */

  /* ===== Semantic — softened ===== */
  --lk-success-50:  #DCFCE7;
  --lk-success-500: #22C55E;
  --lk-success-700: #15803D;
  --lk-warning-50:  #FEF3C7;
  --lk-warning-500: #F59E0B;
  --lk-warning-700: #B45309;
  --lk-danger-50:   #FEF2F2;
  --lk-danger-500:  #DC2626;
  --lk-danger-700:  #B91C1C;
  --lk-info-50:     #DBEAFE;
  --lk-info-500:    #3B82F6;
  --lk-info-700:    #1D4ED8;

  /* ===== Semantic foreground / background aliases ===== */
  --lk-fg-1: var(--lk-ink);          /* primary text */
  --lk-fg-2: var(--lk-slate-700);    /* body */
  --lk-fg-3: var(--lk-slate-500);    /* secondary / meta */
  --lk-fg-4: var(--lk-slate-400);    /* placeholder, disabled */
  --lk-fg-inverse: #FFFFFF;
  --lk-fg-brand: var(--lk-lodge-700);
  --lk-fg-link: var(--lk-sky-600);

  --lk-bg-1: var(--lk-surface);
  --lk-bg-2: var(--lk-surface-alt);
  --lk-bg-3: var(--lk-slate-100);
  --lk-bg-paper: var(--lk-paper);
  --lk-bg-brand: var(--lk-lodge-700);
  --lk-bg-brand-soft: var(--lk-lodge-50);

  --lk-border-1: var(--lk-slate-200);   /* default borders */
  --lk-border-2: var(--lk-slate-300);   /* stronger */
  --lk-border-strong: var(--lk-slate-700);
  --lk-border-focus: var(--lk-sky-500);

  /* ===== Type families ===== */
  --lk-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lk-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --lk-font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; /* same family, tighter tracking */

  /* ===== Type scale (16px base) ===== */
  --lk-text-xs:   12px;   /* meta, captions */
  --lk-text-sm:   13px;   /* dense table cells */
  --lk-text-base: 15px;   /* default body */
  --lk-text-md:   16px;   /* marketing body */
  --lk-text-lg:   18px;   /* lead paragraph */
  --lk-text-xl:   22px;   /* h4 */
  --lk-text-2xl:  28px;   /* h3 */
  --lk-text-3xl:  36px;   /* h2 */
  --lk-text-4xl:  48px;   /* h1 */
  --lk-text-5xl:  64px;   /* display */
  --lk-text-6xl:  88px;   /* hero */

  --lk-leading-tight:  1.12;
  --lk-leading-snug:   1.28;
  --lk-leading-normal: 1.5;
  --lk-leading-relaxed: 1.65;

  --lk-tracking-tight:  -0.02em;   /* large display */
  --lk-tracking-snug:   -0.01em;
  --lk-tracking-normal: 0;
  --lk-tracking-wide:    0.04em;
  --lk-tracking-allcaps: 0.12em;   /* eyebrow labels */

  /* ===== Spacing scale (4px base) ===== */
  --lk-space-1: 4px;
  --lk-space-2: 8px;
  --lk-space-3: 12px;
  --lk-space-4: 16px;
  --lk-space-5: 20px;
  --lk-space-6: 24px;
  --lk-space-8: 32px;
  --lk-space-10: 40px;
  --lk-space-12: 48px;
  --lk-space-16: 64px;
  --lk-space-20: 80px;
  --lk-space-24: 96px;

  /* ===== Radii ===== */
  --lk-radius-xs: 4px;
  --lk-radius-sm: 6px;
  --lk-radius-md: 10px;    /* default for buttons, fields */
  --lk-radius-lg: 14px;    /* cards in app */
  --lk-radius-xl: 20px;    /* marketing cards */
  --lk-radius-2xl: 28px;   /* hero panels */
  --lk-radius-pill: 999px;

  /* ===== Shadows ===== */
  --lk-shadow-xs: 0 1px 2px rgba(15,26,38,0.04);
  --lk-shadow-sm: 0 1px 2px rgba(15,26,38,0.05), 0 1px 3px rgba(15,26,38,0.04);
  --lk-shadow-md: 0 2px 4px rgba(15,26,38,0.05), 0 6px 16px -4px rgba(15,26,38,0.08);
  --lk-shadow-lg: 0 8px 24px -6px rgba(15,26,38,0.12), 0 2px 6px rgba(15,26,38,0.05);
  --lk-shadow-xl: 0 24px 48px -16px rgba(15,26,38,0.22), 0 4px 12px rgba(15,26,38,0.06);
  --lk-shadow-inner: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(15,26,38,0.04);
  --lk-shadow-brand: 0 8px 24px -8px rgba(27,58,87,0.35);

  /* ===== Motion ===== */
  --lk-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --lk-ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --lk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lk-duration-fast: 120ms;
  --lk-duration-med:  220ms;
  --lk-duration-slow: 420ms;
}

/* ============================================================
   Semantic type classes — drop-in for body content
   ============================================================ */

.lk-body, .lk-prose {
  font-family: var(--lk-font-sans);
  font-size: var(--lk-text-base);
  line-height: var(--lk-leading-normal);
  color: var(--lk-fg-2);
  font-feature-settings: 'ss01', 'cv11';
}

.lk-display, h1.lk, .lk-h1 {
  font-family: var(--lk-font-display);
  font-size: var(--lk-text-4xl);
  line-height: var(--lk-leading-tight);
  letter-spacing: var(--lk-tracking-tight);
  font-weight: 700;
  color: var(--lk-fg-1);
}

.lk-h2, h2.lk {
  font-family: var(--lk-font-display);
  font-size: var(--lk-text-3xl);
  line-height: var(--lk-leading-snug);
  letter-spacing: var(--lk-tracking-snug);
  font-weight: 700;
  color: var(--lk-fg-1);
}

.lk-h3, h3.lk {
  font-size: var(--lk-text-2xl);
  line-height: var(--lk-leading-snug);
  letter-spacing: var(--lk-tracking-snug);
  font-weight: 600;
  color: var(--lk-fg-1);
}

.lk-h4, h4.lk {
  font-size: var(--lk-text-xl);
  line-height: var(--lk-leading-snug);
  font-weight: 600;
  color: var(--lk-fg-1);
}

.lk-lead {
  font-size: var(--lk-text-lg);
  line-height: var(--lk-leading-relaxed);
  color: var(--lk-fg-2);
}

.lk-meta {
  font-size: var(--lk-text-xs);
  color: var(--lk-fg-3);
  line-height: var(--lk-leading-normal);
}

.lk-eyebrow {
  font-size: var(--lk-text-xs);
  letter-spacing: var(--lk-tracking-allcaps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lk-fg-3);
}

.lk-mono, .lk-num {
  font-family: var(--lk-font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: 0;
}

/* Tabular numbers everywhere data appears */
.lk-tabular {
  font-variant-numeric: tabular-nums;
}