/* =========================================================================
   DentalPin India design system — tokens
   Layers: primitive scales -> semantic roles -> component tokens.
   Components only use semantic and component tokens, so themes change in one place.
   ========================================================================= */
:root{
  /* ---- Primitive colour scales ---- */
  --ink-950:#0A1220; --ink-900:#0E1828; --ink-800:#13233A; --ink-700:#1C2C47; --ink-600:#26385A; --ink-500:#4A5A70; --ink-300:#A7B6C8; --ink-100:#E3ECF1; --ink-50:#F7FAFB;
  --pulp-700:#B8345A; --pulp-600:#D9466F; --pulp-400:#F06D93; --pulp-100:#FBE3EA;
  --mint-700:#16786D; --mint-600:#1F9E90; --mint-400:#46C9B9; --mint-100:#DDF3F0;
  --iris-600:#5B5BD6; --iris-300:#A5A6F6; --iris-100:#E6E6FB;
  --saffron:#FF9933; --india-green:#138808;

  /* ---- Type ---- */
  --font-display:"Bricolage Grotesque","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Devanagari","Noto Sans Kannada","Noto Sans Malayalam",system-ui,sans-serif;
  --font-body:"Instrument Sans","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Devanagari","Noto Sans Kannada","Noto Sans Malayalam",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Modular scale, ratio 1.25 */
  --fs-xs:.8rem; --fs-sm:.9rem; --fs-base:1.0625rem; --fs-md:1.25rem; --fs-lg:1.56rem; --fs-xl:1.95rem; --fs-2xl:2.44rem; --fs-3xl:3.05rem; --fs-4xl:3.81rem;

  /* ---- Space (4px base) ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;

  /* ---- Radius ---- */
  --radius-xs:6px; --radius-s:10px; --radius-m:18px; --radius-l:28px; --radius-pill:999px;

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.2,.8,.2,1); --dur-fast:.15s; --dur-base:.3s; --dur-slow:.7s;

  /* ---- Semantic roles (light) ---- */
  --enamel:var(--ink-50); --paper:#FFFFFF; --haze:var(--ink-100); --ink:var(--ink-800); --ink-2:var(--ink-500);
  --pulp:var(--pulp-600); --pulp-2:var(--pulp-700); --pulp-soft:var(--pulp-100);
  --mint:var(--mint-600); --mint-soft:var(--mint-100);
  --night:var(--ink-900); --line:#D5E0E7;
  --focus:var(--mint-600);

  /* ---- Elevation ---- */
  --shadow-1:0 1px 2px rgba(19,35,58,.06);
  --shadow:0 1px 2px rgba(19,35,58,.06),0 12px 32px -12px rgba(19,35,58,.18);
  --shadow-3:0 2px 6px rgba(19,35,58,.06),0 30px 60px -24px rgba(19,35,58,.32);

  /* ---- Glass surfaces ---- */
  --glass-bg:rgba(255,255,255,.58);
  --glass-bg-strong:rgba(255,255,255,.74);
  --glass-border:rgba(255,255,255,.75);
  --glass-edge:rgba(19,35,58,.08);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.9);
  --glass-blur:blur(18px) saturate(160%);
  --glass-tint-ink:rgba(16,30,52,.92);

  /* ---- Aurora background ---- */
  --aurora-a:rgba(217,70,111,.26); --aurora-b:rgba(31,158,144,.24); --aurora-c:rgba(91,91,214,.20);

  --display:var(--font-display); --body:var(--font-body);
  --bs-body-font-family:var(--font-body);
}
[data-theme="dark"]{
  --enamel:var(--ink-900); --paper:#15223A; --haze:var(--ink-700); --ink:#EAF1F6; --ink-2:var(--ink-300);
  --pulp:var(--pulp-400); --pulp-2:#FF8DAE; --pulp-soft:#3A2035;
  --mint:var(--mint-400); --mint-soft:#163B3E;
  --line:var(--ink-600); --focus:var(--mint-400);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
  --shadow-3:0 2px 6px rgba(0,0,0,.3),0 30px 70px -20px rgba(0,0,0,.7);
  --glass-bg:rgba(21,34,58,.55);
  --glass-bg-strong:rgba(21,34,58,.76);
  --glass-border:rgba(255,255,255,.10);
  --glass-edge:rgba(255,255,255,.06);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.08);
  --glass-tint-ink:rgba(8,16,28,.78);
  --aurora-a:rgba(240,109,147,.18); --aurora-b:rgba(70,201,185,.14); --aurora-c:rgba(91,91,214,.22);
}
/* Browsers without backdrop-filter get solid surfaces instead of unreadable transparency. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-bg:rgba(255,255,255,.96);--glass-bg-strong:#fff}
  [data-theme="dark"]{--glass-bg:#15223A;--glass-bg-strong:#15223A}
}
@media (prefers-reduced-transparency:reduce){
  :root{--glass-bg:#fff;--glass-bg-strong:#fff}
  [data-theme="dark"]{--glass-bg:#15223A;--glass-bg-strong:#15223A}
}