/* Dently — translated tokens.
   Base DNA: mistral (grid, radii, spacing, motion). Donor: stripe (two-tone light type, action colour, card ease).
   Role names follow design-dna/mistral/tokens.json and design-dna/stripe/tokens.json. */
:root {
  /* color */
  --color-background: #fafaf7;
  --color-surface: #f1f3ee;
  --color-surface-tertiary: #e6e9e2;
  --color-border: #e1e4dd;
  --color-ink: #0b1b2b;
  --color-ink-soft: #52637a;
  --color-ink-quiet: #7c8ba1;
  --color-accent: #1863dc;          /* the one action colour (stripe rule) */
  --color-accent-hover: #1250b8;
  --color-accent-quiet: #e7f0ff;
  --color-accent-contrast: #ffffff;
  --color-action-ghost: rgba(11, 27, 43, 0.05);   /* mistral --color-action-ghost-1 */
  --color-action-ghost-hover: rgba(11, 27, 43, 0.10);
  --color-dark-band: #0d1a2b;
  --color-dark-surface: #13253b;
  --color-dark-node: #1d3a66;
  --color-border-on-dark: #22364f;
  --color-ink-on-dark: #eef3f9;
  --color-ink-soft-on-dark: #a9b8cc;

  /* the unit ramp — only in the odontogram, module squares, CTA band */
  --ramp-1: #d7f5ec;
  --ramp-2: #9fe6d6;
  --ramp-3: #5ccfd0;
  --ramp-4: #36b5fe;
  --ramp-5: #1863dc;
  --ramp-6: #2b3a9c;
  /* tooth-condition hues (from the product's own chart legend) */
  --cond-amber: #f3b63f;
  --cond-rose: #ef6f7a;
  --cond-violet: #8b7cf6;

  /* font */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Inter", system-ui, sans-serif; /* labels use the body face + tabular numerals (no monospace "AI tell"); one token to swap back */

  /* type — stripe light headings */
  --type-display-size: 56px;  --type-display-leading: 1.03;  --type-display-tracking: -0.025em;
  --type-hero-size: 96px;     --type-hero-leading: 1;        --type-hero-tracking: -0.03em;
  --type-h2-size: 32px;       --type-h2-leading: 1.1;        --type-h2-tracking: -0.02em;
  --type-h3-size: 26px;       --type-h3-leading: 1.12;       --type-h3-tracking: -0.01em;
  /* type — mistral 500 cell titles */
  --type-cell-xl: 44px;  --type-cell-xl-leading: 52px;
  --type-cell-lg: 32px;  --type-cell-lg-leading: 40px;
  --type-cell-md: 24px;  --type-cell-md-leading: 32px;
  --type-body-large: 20px; --type-body-large-leading: 28px;
  --type-body: 16px;       --type-body-leading: 24px;
  --type-body-small: 13px; --type-body-small-leading: 20px;
  --type-eyebrow: 13px;    --type-chip: 12px;

  /* space */
  --space-gutter: 40px;
  --space-section-top: 160px;     /* mistral lg:pt-40 */
  --space-section-y: 96px;        /* stripe section padding */
  --nav-height: 48px;

  /* radius — meaning from mistral §0 */
  --radius-grid: 0;
  --radius-chip: 4px;
  --radius-button: 6px;

  /* shadow — only floating product UI (stripe xl) */
  --shadow-float: 0 20px 80px -16px rgba(13, 26, 43, 0.28), 0 10px 60px -16px rgba(13, 26, 43, 0.22);

  /* motion */
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);         /* mistral buttons, 0.3s */
  --dur-ui: 0.3s;
  --ease-card: cubic-bezier(0.165, 0.84, 0.44, 1); /* stripe --card-ease */
  --dur-card: 800ms;
  --ease-ink: cubic-bezier(0.65, 0, 0.35, 1);      /* stripe stats */
  --dur-ink: 1.2s;
  --ease-icon-rise: cubic-bezier(0.65, 0, 0.15, 0.99); /* mistral M04-a */
}

@media (max-width: 1023px) {
  :root {
    --space-gutter: 32px;
    --space-section-top: 104px;
    --space-section-y: 72px;
    --type-hero-size: 68px;
    --type-display-size: 44px;
    --type-h2-size: 30px;
    --type-cell-xl: 34px; --type-cell-xl-leading: 40px;
  }
}
@media (max-width: 767px) {
  :root {
    --space-gutter: 16px;
    --space-section-top: 64px;
    --space-section-y: 64px;
    --type-hero-size: 44px;
    --type-display-size: 36px;
    --type-h2-size: 26px;
    --type-cell-xl: 28px; --type-cell-xl-leading: 34px;
    --type-cell-lg: 24px; --type-cell-lg-leading: 30px;
    --type-body-large: 18px; --type-body-large-leading: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-ui: 0s; --dur-card: 0s; --dur-ink: 0s; }
}