/* ============================================================
   Kyroco site, shared base stylesheet.

   TOKENS ARE THE DESIGN SYSTEM. The :root block below mirrors
   brand/design-system/colors_and_type.css (the declared source
   of truth) verbatim; do not edit values here, edit the design
   system and re-sync. Site-only extensions live in the marked
   section at the end of :root and nowhere else.

   Load this BEFORE the page's own <style> block. Chrome CSS
   (header/CTA/footer) is injected by js/site.js and relies on
   these tokens being present on every page.

   Page-local by design (do not add here): the .cta vertical
   padding rule (chrome-parity guard B2 requires it inline on
   every page that carries the site-cta slot).
   ============================================================ */

@font-face{font-family:'Playfair Display'; src:url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Playfair Display'; src:url('../fonts/PlayfairDisplay-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Playfair Display'; src:url('../fonts/PlayfairDisplay-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:'Satoshi'; src:url('../fonts/Satoshi-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap;}
@font-face{font-family:'Satoshi'; src:url('../fonts/Satoshi-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Satoshi'; src:url('../fonts/Satoshi-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Satoshi'; src:url('../fonts/Satoshi-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:'Satoshi'; src:url('../fonts/Satoshi-Black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap;}

:root{
  /* ========== COLORS: CORE BRAND (design system) ========== */
  --coral-deep:#c13340; --coral:#e44456; --coral-light:#ed7a84; --coral-wash:#fde8ea;
  --teal-deep:#357a8d; --teal:#4a90a4; --teal-light:#7bb4c4; --teal-wash:#e3f1f5;
  --midnight-deep:#1a1310; --midnight:#1f1a17; --midnight-90:#2c2622;
  --midnight-50:#6a625c; --midnight-15:#d2cdc8; --midnight-05:#f1efed;

  /* ========== COLORS: NEUTRAL ========== */
  --white:#fafbfc; --gray-50:#f8f9fa; --gray-100:#f3f4f6; --gray-200:#e5e7eb;
  --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563;
  --gray-700:#374151; --gray-800:#1f2937;
  /* Warm neutral steps (brand-continuity repaint 2026-07-25) */
  --warm-15:#e7e2dd; --warm-100:#efe9e4; --warm-500:#746a61;

  /* ========== COLORS: SEMANTIC ========== */
  --success:#22c55e; --success-wash:#dcfce7;
  --warning:#f59e0b; --warning-wash:#fef3c7; --warning-deep:#b45309;
  --error:#ef4444; --error-wash:#fee2e2;
  --info:var(--teal); --info-wash:var(--teal-wash);

  /* ========== GRADIENTS ========== */
  --grad-signal:linear-gradient(135deg,#e44456 0%,#c13340 100%);
  --grad-hero:linear-gradient(135deg,#1f1a17 0%,#2c2622 50%,#6a625c 100%);
  --grad-insight:linear-gradient(135deg,#e44456 0%,#6a625c 100%);
  --grad-teal:linear-gradient(135deg,#4a90a4 0%,#357a8d 100%);
  --grad-overlay:linear-gradient(180deg,rgba(31,26,23,0) 0%,rgba(31,26,23,0.85) 100%);

  /* ========== TYPOGRAPHY ========== */
  --font-display:'Playfair Display',Georgia,serif;
  --font-display-weight:400;
  --font-body:'Satoshi',system-ui,-apple-system,sans-serif;
  --text-5xl:60px; --text-4xl:48px; --text-3xl:40px; --text-2xl:32px; --text-xl:24px;
  --text-lg:20px; --text-md:18px; --text-base:16px; --text-sm:13px; --text-xs:12px;
  --text-2xs:11px;
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.6; --leading-relaxed:1.75;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.12em;

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

  /* ========== RADII (two tokens; that's the system) ========== */
  --radius-sm:4px; --radius-full:9999px;

  /* ========== SHADOWS ========== */
  --shadow-sm:0 1px 2px rgba(31,26,23,0.05);
  --shadow-md:0 4px 12px rgba(31,26,23,0.08);
  --shadow-lg:0 8px 24px rgba(31,26,23,0.12);
  --shadow-xl:0 16px 48px rgba(31,26,23,0.16);
  --shadow-glow-coral:0 0 20px rgba(228,68,86,0.25);
  --shadow-glow-teal:0 0 20px rgba(74,144,164,0.25);

  /* ========== MOTION ========== */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --duration-fast:120ms; --duration-normal:200ms; --duration-slow:400ms;
  /* The masthead wordmark morph. A brand gesture rather than interface feedback,
     so it is slower and starts slowly; the why is in the canonical. */
  --duration-morph:600ms; --duration-morph-fade:300ms;
  --ease-morph:cubic-bezier(0.77,0,0.175,1);

  /* ========== Z-INDEX ========== */
  --z-dropdown:100; --z-sticky:200; --z-overlay:300; --z-modal:400; --z-toast:500;

  /* ========== CONTAINERS ========== */
  --container-sm:640px; --container-md:768px; --container-lg:1024px;
  --container-xl:1200px; --container-2xl:1400px;

  /* ========== SEMANTIC ROLES (warm repaint 2026-07-25, no role resolves to a gray) ========== */
  --fg-1:var(--midnight); --fg-2:var(--midnight-50); --fg-3:var(--warm-500);
  --fg-4:var(--midnight-50); --fg-on-dark:rgba(255,255,255,0.85); --fg-on-dark-muted:var(--midnight-50);
  --bg-1:var(--white); --bg-2:var(--midnight-05); --bg-3:var(--warm-100);
  --border-1:var(--warm-15); --border-2:var(--midnight-15);

  /* ========== SITE EXTENSIONS (not in the design system) ==========
     --container: the site's default page width, pinned to the DS
       container scale. Docs subsites override to --container-lg.
     --font-mono: the DS mono stack from colors_and_type.css. */
  --container:var(--container-xl);
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{ font-family:var(--font-body); font-size:var(--text-base); line-height:1.6; color:var(--midnight); background:var(--white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.container{max-width:var(--container); margin:0 auto; padding:0 32px;}

.overline{font-family:var(--font-body); font-size:var(--text-2xs); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--teal);}
.overline.on-dark{color:var(--coral-light);}

/* Buttons: one family, sitewide. Durations come from the DS motion
   tokens; the coral hover glow and active press are part of the set. */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; padding:14px 26px; border-radius:var(--radius-full); border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
/* Primary rests on coral-deep: white labels on bright coral are ~3.8:1, under
   AA. Hover holds the deep fill and adds the glow, so the accessible state is
   the default state (UX doc section 5). Bright coral stays the ring/accent. */
.btn-coral{background:var(--coral-deep); color:#fff;}
.btn-coral:hover{background:var(--coral-deep); box-shadow:var(--shadow-glow-coral);}
.btn-coral:active{transform:scale(0.97);}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,0.22);}
.btn-ghost:hover{border-color:rgba(255,255,255,0.45);}
.btn-sm{padding:10px 20px;}