/* ============================================================
   Dr Kiseki — Color Tokens
   Brand red (action) + logo navy & cyan (trust) on white.
   ============================================================ */
:root {
  /* ---- Brand: Red (primary action / energy) ---- */
  --kiseki-red-50:  #FCEAE9;
  --kiseki-red-100: #F8D2CF;
  --kiseki-red-300: #EE9089;
  --kiseki-red-500: #D7261E;  /* primary */
  --kiseki-red-600: #C01C15;
  --kiseki-red-700: #A4160F;  /* hover / pressed */
  --kiseki-red-900: #6E0C08;

  /* ---- Brand: Navy (trust / text / dark surfaces) ---- */
  --kiseki-navy-50:  #E7EEF5;
  --kiseki-navy-100: #C6D7E7;
  --kiseki-navy-300: #6E93B7;
  --kiseki-navy-500: #1F5283;
  --kiseki-navy-700: #003F73;
  --kiseki-navy-800: #00305F;  /* logo navy */
  --kiseki-navy-900: #042244;

  /* ---- Brand: Cyan (accent / highlights / info) ---- */
  --kiseki-cyan-50:  #E1F4FB;
  --kiseki-cyan-100: #BDE8F6;
  --kiseki-cyan-300: #66CBEC;
  --kiseki-cyan-500: #00A0D0;  /* logo cyan */
  --kiseki-cyan-600: #0086B0;
  --kiseki-cyan-700: #006A8C;

  /* ---- Neutrals (cool, blue-tinted gray) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8FB;
  --neutral-100: #EDF1F6;
  --neutral-200: #DCE3EC;
  --neutral-300: #C3CEDB;
  --neutral-400: #94A3B5;
  --neutral-500: #6B7B90;
  --neutral-600: #4D5D72;
  --neutral-700: #364556;
  --neutral-800: #233140;
  --neutral-900: #131C28;

  /* ---- Functional ---- */
  --green-500:  #1E9E5A;
  --green-50:   #E5F5EC;
  --amber-500:  #E0A100;
  --amber-50:   #FBF1D6;
  --red-danger: #D7261E;
  --red-danger-50: #FCEAE9;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --brand-primary:        var(--kiseki-red-500);
  --brand-primary-hover:  var(--kiseki-red-700);
  --brand-primary-tint:   var(--kiseki-red-50);
  --brand-secondary:      var(--kiseki-navy-800);
  --brand-accent:         var(--kiseki-cyan-500);

  --text-strong:  var(--kiseki-navy-900);
  --text-heading: var(--kiseki-navy-800);
  --text-body:    var(--neutral-700);
  --text-muted:   var(--neutral-500);
  --text-on-brand:    #FFFFFF;
  --text-on-accent:   #FFFFFF;
  --text-link:        var(--kiseki-red-600);

  --surface-page:        var(--neutral-50);
  --surface-card:        var(--neutral-0);
  --surface-raised:      var(--neutral-0);
  --surface-sunken:      var(--neutral-100);
  --surface-brand:       var(--kiseki-navy-800);
  --surface-brand-deep:  var(--kiseki-navy-900);
  --surface-brand-tint:  var(--kiseki-red-50);
  --surface-accent-tint: var(--kiseki-cyan-50);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--kiseki-red-500);

  --focus-ring: 0 0 0 3px rgba(215, 38, 30, 0.30);
  --focus-ring-navy: 0 0 0 3px rgba(0, 48, 95, 0.28);

  --status-success: var(--green-500);
  --status-success-tint: var(--green-50);
  --status-warning: var(--amber-500);
  --status-warning-tint: var(--amber-50);
  --status-danger:  var(--red-danger);
  --status-danger-tint: var(--red-danger-50);
  --status-info:    var(--kiseki-cyan-500);
  --status-info-tint: var(--kiseki-cyan-50);
}
/* ============================================================
   Dr Kiseki — Typography Tokens
   Display: Sora (geometric, structured, matches the wordmark)
   Body:    Plus Jakarta Sans (humanist, highly legible for BM)
   ============================================================ */
:root {
  --font-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  /* Type scale (px) — fluid-friendly, clamp in layout where needed */
  --fs-display-xl: 64px;  /* hero headline */
  --fs-display-lg: 52px;
  --fs-display-md: 42px;
  --fs-h1: 34px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-overline:12px;

  /* Line heights */
  --lh-tight:   1.08; /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-snug:    -0.01em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-wide:    0.02em; /* @kind other */
  --ls-overline:0.14em; /* @kind other */

  /* Semantic roles */
  --text-display-font: var(--font-display);
  --text-display-weight: var(--fw-extrabold);
  --text-heading-font: var(--font-display);
  --text-heading-weight: var(--fw-bold);
  --text-body-font: var(--font-body);
  --text-body-weight: var(--fw-regular);
  --text-overline-weight: var(--fw-bold);
}
/* ============================================================
   Dr Kiseki — Spacing, Radius, Elevation, Motion, Layout
   4px base grid.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --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;
  --space-32: 128px;

  /* ---- Corner radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Elevation (soft, cool-tinted shadows) ---- */
  --shadow-xs: 0 1px 2px rgba(4, 34, 68, 0.06);
  --shadow-sm: 0 1px 3px rgba(4, 34, 68, 0.08), 0 1px 2px rgba(4, 34, 68, 0.04);
  --shadow-md: 0 4px 12px rgba(4, 34, 68, 0.08), 0 2px 4px rgba(4, 34, 68, 0.05);
  --shadow-lg: 0 12px 28px rgba(4, 34, 68, 0.12), 0 4px 8px rgba(4, 34, 68, 0.06);
  --shadow-xl: 0 24px 56px rgba(4, 34, 68, 0.16), 0 8px 16px rgba(4, 34, 68, 0.08);
  --shadow-brand: 0 10px 24px rgba(215, 38, 30, 0.24);
  --shadow-focus: var(--focus-ring);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-base:   200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */
  --duration-slower: 500ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;
  --gutter: var(--space-6);
  --section-py: var(--space-24);
}
/* ============================================================
   Dr Kiseki — Base element styles & primitives.
   Lightweight resets + brand defaults. Component CSS lives in JSX.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

strong, b { font-weight: var(--fw-bold); color: var(--text-strong); }

small { font-size: var(--fs-caption); }

::selection { background: var(--kiseki-red-100); color: var(--kiseki-navy-900); }

img { max-width: 100%; display: block; }

hr {
  border: none;
  border-top: var(--border-width) solid var(--border-subtle);
  margin: var(--space-8) 0;
}

/* ---- Utility primitives (handy in cards & kits) ---- */
.dk-overline {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.dk-eyebrow-navy { color: var(--brand-secondary); }

.dk-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.dk-container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}