/* ============================================================================
   suite-tokens.css — Dental Suite Design System · shared tokens (v1)
   ----------------------------------------------------------------------------
   Source of truth: "Dental Suite — Smooth UX / Motion System" design handoff
   (tokens/colors|typography|spacing|effects merged verbatim — values are exact,
   deliberately off-grid; do not round). Fonts are NOT imported here — every
   page keeps its existing Google Fonts <link> to avoid double-loading.

   Golden rules baked in:
   • Animate only transform + opacity (the primitives below are transform-only).
   • Shadows are Twilight-tinted rgba(81,87,122,…), never neutral grey.
   • prefers-reduced-motion neutralizes lift/press and clamps durations.
   ============================================================================ */
:root{
  /* ---- Ascent ramp (brand) ---- */
  --ds-indigo:#262A44; --ds-dusk:#3F4567; --ds-twilight:#595F89; --ds-iris:#727AAC;
  --ds-periwinkle:#8B94CE; --ds-mist:#E6E8F3; --ds-cloud:#F7F7FA; --ds-slate:#4C5378;
  /* ---- Warm neutrals (product surface) ---- */
  --ds-page:#F6F4EF; --ds-surface:#FFFFFF; --ds-surface-alt:#FBFAF7;
  --ds-ink:#2C2A26; --ds-ink-cool:#2A2C40; --ds-muted:#6F6B60; --ds-faint:#A7A193;
  --ds-line:#ECE8DE; --ds-line-soft:#E7E1D4; --ds-line-cool:#E6E8EF; --ds-chip:#EEEEF6;
  /* ---- Dark chrome ---- */
  --ds-header-bg:#2A2C40; --ds-rail-bg:#262A44; --ds-on-dark:#FBFAF7; --ds-on-dark-mute:#C3C6DB;
  /* ---- Semantic ---- */
  --ds-success:#12805C; --ds-success-bg:#EEF7F3; --ds-success-line:#BFE1CA;
  --ds-danger:#D92D20;  --ds-danger-bg:#FDF1F0;  --ds-danger-line:#EAB8B8;
  --ds-warning:#B54708; --ds-warning-bg:#FEF4E6; --ds-warning-line:#F0C99A;
  --ds-info:#3F4567;    --ds-info-bg:#EEF0F7;    --ds-info-line:#D3D7E8;
  --ds-pending:#B04A3F; --ds-pending-bg:#F8ECE9;
  /* ---- Semantic aliases ---- */
  --ds-text-primary:var(--ds-ink); --ds-text-secondary:var(--ds-muted); --ds-text-faint:var(--ds-faint);
  --ds-bg-app:var(--ds-page); --ds-surface-card:var(--ds-surface); --ds-border-card:var(--ds-line);
  --ds-accent:var(--ds-dusk); --ds-accent-strong:var(--ds-indigo); --ds-accent-soft:var(--ds-periwinkle);
  --ds-focus:var(--ds-dusk);
  /* ---- Type ---- */
  --ds-font-sans:'Manrope',system-ui,-apple-system,sans-serif;
  --ds-font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --ds-font-display:'Bricolage Grotesque','Manrope',sans-serif;   /* wordmark only */
  --ds-font-label:'Onest','Manrope',sans-serif;                   /* tagline only */
  --ds-weight-regular:400; --ds-weight-medium:500; --ds-weight-semibold:600;
  --ds-weight-bold:700; --ds-weight-heavy:800;
  --ds-display:40px; --ds-heading:23px; --ds-title:21px; --ds-title-sm:17px;
  --ds-body:14px; --ds-body-sm:13px; --ds-body-xs:12px;
  --ds-label:11px; --ds-label-sm:10px; --ds-micro:9px;
  --ds-lh-tight:1.08; --ds-lh-snug:1.42; --ds-lh-body:1.55;
  --ds-track-display:-0.01em; --ds-track-wordmark:-0.02em; --ds-track-label:0.14em; --ds-track-tag:0.22em;
  /* ---- Spacing / radii / layout ---- */
  --ds-space-1:4px; --ds-space-2:8px; --ds-space-3:12px; --ds-space-4:16px; --ds-space-5:20px;
  --ds-space-6:26px; --ds-space-7:32px; --ds-space-8:42px; --ds-space-9:60px;
  --ds-radius-xs:6px; --ds-radius-sm:8px; --ds-radius-md:11px; --ds-radius-lg:13px;
  --ds-radius-xl:20px; --ds-radius-pill:999px;
  --ds-rail-width:94px; --ds-content-max:1200px; --ds-header-max:1280px; --ds-tile-min-h:198px;
  /* ---- Elevation ---- */
  --ds-shadow-flat:0 1px 2px rgba(0,0,0,.03);
  --ds-shadow-raised:0 1px 4px rgba(30,34,60,.06);
  --ds-shadow-hover:0 12px 30px rgba(81,87,122,.15);
  --ds-shadow-quote:0 14px 34px rgba(81,87,122,.20);
  --ds-shadow-pop:3px 2px 12px rgba(42,44,64,.18);
  --ds-shadow-modal:0 24px 70px rgba(24,28,50,.10);
  /* ---- Motion ---- */
  --ds-dur-fast:.14s; --ds-dur:.16s; --ds-dur-slow:.28s; --ds-dur-rail:.32s;
  --ds-ease:cubic-bezier(.2,.7,.2,1);
  --ds-ease-soft:cubic-bezier(.22,.61,.36,1);
  --ds-ease-spring:cubic-bezier(.34,1.4,.5,1);
  /* ---- Interaction primitives ---- */
  --ds-lift:translateY(-2px);
  --ds-press:scale(.97);
  --ds-ring:0 0 0 3px rgba(63,69,103,.28);
}

/* ---- Reduced motion: neutralize lift/press, clamp animation time ---------- */
@media (prefers-reduced-motion:reduce){
  :root{ --ds-lift:none; --ds-press:none;
         --ds-dur-fast:.01s; --ds-dur:.01s; --ds-dur-slow:.01s; --ds-dur-rail:.01s; }
  .ds-anim, .ds-card-in{ animation-duration:.01s !important; animation-delay:0s !important; }
}

/* ============================================================================
   Conservative global interaction standards (function > animation):
   transform/opacity/box-shadow only — cannot affect layout or behavior.
   ============================================================================ */
/* Focus ring — keyboard only, never on mouse click */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
select:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:none; box-shadow:var(--ds-ring);
}
/* Press feedback on real buttons (transform-only; reduced-motion → none) */
button:not([disabled]):active{ transform:var(--ds-press); }

/* ---- Opt-in utilities ------------------------------------------------------ */
.ds-liftable{ transition:transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease); }
.ds-liftable:hover{ transform:var(--ds-lift); box-shadow:var(--ds-shadow-hover); }
@keyframes dsCardIn{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }
.ds-card-in{ animation:dsCardIn .5s var(--ds-ease) both; }
@keyframes dsFadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.ds-fade-in{ animation:dsFadeIn var(--ds-dur-slow) var(--ds-ease) both; }