/* ============================================================
   KSHC — Colors, Type & Foundations
   KS Hospitality Consulting · kshcons.com
   ============================================================
   Two families do all the work:
     · Fraunces      — display serif (echoes the logotype's "KS")
     · Inter         — humanist sans for body, UI, captions
   Substitute for: the logo's custom serif "K S" (closest GFonts
   match is Fraunces; flag to client if exact font is provided).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=GFS+Didot&family=DM+Sans:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Jost:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- BRAND BLUES (sampled from logo: KS = #204F7B) ---------- */
  --blue-900: #0F2740;   /* deepest, ink */
  --blue-800: #173758;   /* hover on primary */
  --blue-700: #204F7B;   /* PRIMARY — the logo blue */
  --blue-600: #2E6396;   /* link, focus ring */
  --blue-500: #4D82B5;   /* secondary actions */
  --blue-400: #87AACB;   /* hairline, subtle accents */
  --blue-200: #C9D9E7;   /* tinted surface */
  --blue-100: #E6EDF4;   /* whisper tint */

  /* ---- BEIGES / LINEN (the "pale beige" half of the palette) -- */
  --linen-50:  #FAF7F1;  /* page background */
  --linen-100: #F4EFE5;  /* card / panel */
  --linen-200: #ECE4D3;  /* dividers, soft fill */
  --linen-300: #DDD0B6;  /* warm border */
  --linen-400: #B8A584;  /* muted text on dark */
  --linen-500: #8C7A5B;  /* warm accent text */

  /* ---- INK / NEUTRALS (sampled from logo wordmark: #1E1F2A) ---- */
  --ink-900: #14151D;
  --ink-800: #1E1F2A;    /* body text */
  --ink-700: #2C2E3B;
  --ink-600: #4A4D5C;    /* secondary text */
  --ink-500: #6E7184;    /* tertiary / captions */
  --ink-400: #9498A8;    /* disabled */
  --ink-300: #C5C8D2;    /* divider on light */
  --ink-200: #E3E5EB;    /* surface stroke */
  --ink-100: #F2F3F6;
  --ink-0:   #FFFFFF;

  /* ---- SEMANTIC (financial: muted, not loud) ------------------ */
  --profit:   #2F7A57;   /* up / positive — sage green */
  --profit-bg:#E5EFEA;
  --loss:     #B4452F;   /* down / cost — terracotta, not red */
  --loss-bg:  #F4E4DD;
  --warn:     #B8862E;   /* caution — mustard */
  --warn-bg:  #F5EAD0;

  /* ---- ROLE TOKENS (use these in app code) -------------------- */
  --bg:           var(--linen-50);
  --bg-elev:      var(--ink-0);
  --bg-tint:      var(--linen-100);
  --bg-deep:      var(--blue-900);    /* dark sections / footer */

  --fg:           var(--ink-800);
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-500);
  --fg-on-deep:   var(--linen-50);    /* text on blue-900 */
  --fg-on-deep-muted: var(--linen-300);

  --primary:      var(--blue-700);
  --primary-hov:  var(--blue-800);
  --primary-prs:  var(--blue-900);
  --on-primary:   var(--ink-0);

  --accent:       var(--linen-300);   /* warm linen accent */
  --link:         var(--blue-600);

  --border:       var(--ink-200);
  --border-warm:  var(--linen-200);
  --border-strong:var(--ink-300);
  --focus-ring:   color-mix(in oklab, var(--blue-600) 50%, transparent);

  /* ---- TYPE FAMILIES -----------------------------------------
     `--font-sans` is the live wire — Tweaks panel rewrites it.
     Alternatives kept as named families so site can pivot quickly:
       · Inter         — current (humanist, neutral)
       · Poppins       — geometric, friendlier (matches the user's biz card)
       · Jost          — substitute for Century Gothic on the web
                         (Century Gothic itself is system-font on macOS/Win)
  -------------------------------------------------------------- */
  --font-serif:   'Cormorant Garamond', 'Spectral', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans-poppins: 'Poppins', system-ui, sans-serif;
  --font-sans-gothic:  'Century Gothic', 'Jost', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- TYPE SCALE (modular, 1.2 ratio, anchored at 16px) ------ */
  --t-xs:   0.75rem;   /* 12 — micro labels, footnotes  */
  --t-sm:   0.875rem;  /* 14 — captions, dense UI       */
  --t-base: 1rem;      /* 16 — body                      */
  --t-md:   1.125rem;  /* 18 — lead paragraph            */
  --t-lg:   1.375rem;  /* 22 — h4, section eyebrow       */
  --t-xl:   1.75rem;   /* 28 — h3                        */
  --t-2xl:  2.25rem;   /* 36 — h2                        */
  --t-3xl:  3rem;      /* 48 — h1                        */
  --t-4xl:  4rem;      /* 64 — hero, page openers        */
  --t-5xl:  5.5rem;    /* 88 — display, oversized stat   */

  /* ---- LINE HEIGHTS ------------------------------------------ */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* ---- TRACKING ---------------------------------------------- */
  --tr-tight:   -0.02em;
  --tr-display: -0.015em;
  --tr-eyebrow: 0.18em;   /* HOSPITALITY-like wide caps */
  --tr-cap:     0.08em;

  /* ---- SPACING (4px base) ------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- RADII (small. We are a financial firm, not a toy app) -- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---- ELEVATION (soft, paper-like) -------------------------- */
  --shadow-1: 0 1px 0 rgba(20, 21, 29, 0.04), 0 1px 2px rgba(20, 21, 29, 0.04);
  --shadow-2: 0 1px 0 rgba(20, 21, 29, 0.04), 0 4px 12px rgba(20, 21, 29, 0.06);
  --shadow-3: 0 2px 0 rgba(20, 21, 29, 0.03), 0 12px 32px rgba(20, 21, 29, 0.08);
  --shadow-inset: inset 0 0 0 1px rgba(20, 21, 29, 0.06);

  /* ---- MOTION (everything is calm, professional) ------------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.7, 0.3);
  --ease-std:  cubic-bezier(0.4, 0.1, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply to bare HTML; UI components extend these.
   ============================================================ */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink-900);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl);  font-weight: 600; }
h4 { font-size: var(--t-lg);  font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; }

.display {
  font-family: var(--font-serif);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: var(--tr-tight);
}

/* The signature "HOSPITALITY CONSULTING" eyebrow style */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
  max-width: 68ch;
}

.lead {
  font-size: var(--t-md);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  max-width: 56ch;
}

small, .caption {
  font-size: var(--t-sm);
  color: var(--fg-subtle);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--link) 35%, transparent);
  transition: color var(--dur-fast) var(--ease-std),
              text-decoration-color var(--dur-fast) var(--ease-std);
}
a:hover { color: var(--blue-800); text-decoration-color: currentColor; }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--s-6) 0;
}

::selection { background: var(--blue-200); color: var(--ink-900); }

/* Numeric tabular figures — financial UI must align */
.tabular { font-variant-numeric: tabular-nums; }