/* ============================================================
   LURYE CLINIC — Web tokens
   Inlines the canonical design-system tokens (originally
   lurye-clinic-design-system/project/colors_and_type.css) and
   adds web-only motion + dark-ladder + layout extras on top.
   ============================================================ */

/* ============================================================
   Foundation tokens
   Source: LC_corporate_identity_guide.pdf (Kristina Chernova)
   ============================================================ */

:root {
  /* ── Color primitives — Primary palette (clinic) ──────────── */
  --lc-ink-900:    #404041;
  --lc-warm-700:   #5D554E;
  --lc-olive-600:  #5C625B;
  --lc-beige-500:  #8F8272;
  --lc-gray-200:   #D1D2D4;
  --lc-gray-100:   #E6E7E8;
  --lc-white:      #FFFFFF;

  /* ── Color primitives — Aviation accent ───────────────────── */
  --lc-avia-ink-900:   #3E424F;
  --lc-avia-deep-700:  #515868;
  --lc-avia-mid-600:   #5A687A;
  --lc-avia-light-500: #728499;

  /* ── Semantic — Light (Clinic, default) ───────────────────── */
  --bg-page:        var(--lc-gray-100);
  --bg-surface:     var(--lc-white);
  --bg-muted:       var(--lc-gray-200);
  --bg-inverse:     var(--lc-ink-900);
  --bg-accent-warm:  var(--lc-warm-700);
  --bg-accent-olive: var(--lc-olive-600);
  --bg-accent-beige: var(--lc-beige-500);

  --text-primary:   var(--lc-ink-900);
  --text-secondary: rgba(64, 64, 65, 0.7);
  --text-tertiary:  rgba(64, 64, 65, 0.5);
  --text-on-inverse: var(--lc-white);

  --border-default: var(--lc-ink-900);
  --border-subtle:  var(--lc-gray-200);
  --border-hairline: 1px;

  /* ── Type ─────────────────────────────────────────────────── */
  --font-sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fw-light:  300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Modular 1.25 scale, anchored at 16px */
  --fs-display-lockup: 48px;  --lh-display-lockup: 56px;
  --fs-display-xl:     40px;  --lh-display-xl:     48px;
  --fs-heading-lg:     28px;  --lh-heading-lg:     36px;
  --fs-heading-md:     20px;  --lh-heading-md:     28px;
  --fs-heading-sm:     14px;  --lh-heading-sm:     20px;
  --fs-body-lg:        18px;  --lh-body-lg:        28px;
  --fs-body-md:        16px;  --lh-body-md:        24px;
  --fs-body-sm:        14px;  --lh-body-sm:        22px;
  --fs-mono-sm:        13px;  --lh-mono-sm:        20px;

  --tracking-display: 0.10em;
  --tracking-heading: 0.08em;
  --tracking-eyebrow: 0.16em;
  --tracking-body:    0;

  /* ── Spacing — 4px base ───────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-full: 9999px;

  /* ── Layout ──────────────────────────────────────────────── */
  --content-max: 1280px;
  --grid-gutter: 24px;
  --grid-margin: 32px;

  /* No shadow system — "printed paper" aesthetic. */
  --shadow-none: none;

  /* ── Web-only — Motion ────────────────────────────────────── */
  --ease-out-strong:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:      cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press:        140ms;
  --dur-tooltip:      180ms;
  --dur-ui:           220ms;
  --dur-reveal:       320ms;
  --stagger-step:     60ms;
  --scale-press:      0.97;

  /* ── Web-only — Soft inverse text (was 0.85/0.88/0.92 ad-hoc) */
  --text-on-inverse-soft: rgba(255, 255, 255, 0.88);

  /* ── Web-only — Dark ladder for the three dark sections ──── */
  --bg-ink-mid:        #4a4a4b;
  --bg-ink-deep:       #404041;
  --bg-ink-near-black: #2b2b2c;
}

/* ── Aviation accent mode ───────────────────────────────────── */
[data-theme="aviation"] {
  --bg-inverse:      var(--lc-avia-ink-900);
  --bg-accent-warm:  var(--lc-avia-deep-700);
  --bg-accent-olive: var(--lc-avia-mid-600);
  --bg-accent-beige: var(--lc-avia-light-500);
  --text-primary:    var(--lc-avia-ink-900);
  --border-default:  var(--lc-avia-ink-900);
}

/* ── Dark mode (experimental — see design-system README §9 #1) */
[data-theme="dark"] {
  --bg-page:        var(--lc-ink-900);
  --bg-surface:     var(--lc-warm-700);
  --bg-muted:       #2D2A26;
  --bg-inverse:     var(--lc-white);
  --text-primary:   var(--lc-white);
  --text-secondary: var(--lc-gray-200);
  --text-tertiary:  rgba(255, 255, 255, 0.5);
  --text-on-inverse: var(--lc-ink-900);
  --border-default: var(--lc-gray-200);
  --border-subtle:  var(--lc-warm-700);
}

/* ============================================================
   Semantic type roles
   ============================================================ */
.lc-display-lockup,
.lc-display-xl,
.lc-heading-lg,
.lc-heading-md,
.lc-heading-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--text-primary);
}

.lc-display-lockup { font-size: var(--fs-display-lockup); line-height: var(--lh-display-lockup); letter-spacing: 0.12em; }
.lc-display-xl     { font-size: var(--fs-display-xl);     line-height: var(--lh-display-xl);     letter-spacing: var(--tracking-display); }
.lc-heading-lg     { font-size: var(--fs-heading-lg);     line-height: var(--lh-heading-lg);     letter-spacing: var(--tracking-heading); }
.lc-heading-md     { font-size: var(--fs-heading-md);     line-height: var(--lh-heading-md);     letter-spacing: var(--tracking-heading); }
.lc-heading-sm     { font-size: var(--fs-heading-sm);     line-height: var(--lh-heading-sm);     letter-spacing: var(--tracking-eyebrow); }

.lc-body-lg, .lc-body-md, .lc-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  color: var(--text-primary);
  letter-spacing: 0;
  text-transform: none;
}
.lc-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.lc-body-md { font-size: var(--fs-body-md); line-height: var(--lh-body-md); }
.lc-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }

.lc-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: var(--lh-mono-sm);
  font-weight: var(--fw-regular);
}

/* Sensible HTML defaults so plain markup looks right */
html { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-page); }
body { margin: 0; font-weight: var(--fw-light); font-size: var(--fs-body-md); line-height: var(--lh-body-md); }
h1, h2, h3, h4 { font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tracking-heading); margin: 0; }
h1 { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); }
h2 { font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg); }
h3 { font-size: var(--fs-heading-md); line-height: var(--lh-heading-md); }
h4 { font-size: var(--fs-heading-sm); line-height: var(--lh-heading-sm); letter-spacing: var(--tracking-eyebrow); }
p  { margin: 0; }
hr { border: 0; border-top: var(--border-hairline) solid var(--border-default); margin: var(--space-7) 0; }