/* ================================================================
   DESIGN TOKENS — The Dental Pages v7 (Editorial Light)
   Single source of truth for all design variables
   Light theme default, dark mode available
   ================================================================ */

:root, [data-theme="light"] {
  /* ---- Backgrounds ---- */
  --bg:    #ffffff;
  --bg1:   #fafafa;
  --bg2:   #f5f5f7;
  --bg3:   #efefef;
  --bg4:   #e5e5ea;
  --bg5:   #d1d1d6;

  /* ---- Text ---- */
  --w:     #1d1d1f;
  --w2:    #2c2c2e;
  --g1:    #48484a;
  --g2:    #636366;
  --g3:    #86868b;
  --g4:    #aeaeb2;
  --g5:    #c7c7cc;

  /* ---- Accent (editorial blue) ---- */
  --acc:   #0066cc;
  --acc2:  #4f46e5;
  --acc3:  #9333ea;
  --accH:  #0055aa;
  --accG:  rgba(0, 102, 204, .07);

  /* ---- Semantic ---- */
  --grn:   #248a3d;
  --ylw:   #b25000;
  --red:   #d70015;

  /* ---- Borders ---- */
  --border: rgba(0, 0, 0, .08);
  --border-subtle: rgba(0, 0, 0, .04);

  /* ---- Theme indicator ---- */
  --theme-icon-sun: block;
  --theme-icon-moon: none;
  color-scheme: light;
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --bg:    #000000;
  --bg1:   #0a0a0b;
  --bg2:   #111113;
  --bg3:   #161618;
  --bg4:   #1c1c1f;
  --bg5:   #242427;

  --w:     #f5f5f7;
  --w2:    #e8e8ed;
  --g1:    #a1a1a6;
  --g2:    #86868b;
  --g3:    #6e6e73;
  --g4:    #48484a;
  --g5:    #2c2c2e;

  --acc:   #2997ff;
  --acc2:  #6366f1;
  --acc3:  #a855f7;
  --accH:  #0a84ff;
  --accG:  rgba(41, 151, 255, .12);

  --grn:   #30d158;
  --ylw:   #ffd60a;
  --red:   #ff453a;

  --border: rgba(255, 255, 255, .06);
  --border-subtle: rgba(255, 255, 255, .03);

  --theme-icon-sun: none;
  --theme-icon-moon: block;
  color-scheme: dark;
}

/* ---- SHARED TOKENS (theme-independent) ---- */
:root {
  /* ---- Radii ---- */
  --r:     12px;
  --r2:    16px;
  --rpill: 980px;

  /* ---- Easing ---- */
  --ease:   cubic-bezier(.25, .1, .25, 1);
  --spring: cubic-bezier(.16, 1, .3, 1);
  --expo:   cubic-bezier(.19, 1, .22, 1);
  --snap:   cubic-bezier(0, .7, .3, 1);

  /* ---- Timing ---- */
  --dur-fast:   .2s;
  --dur-normal: .4s;
  --dur-slow:   .8s;
  --dur-reveal: .9s;

  /* ---- Z-index scale ---- */
  --z-grain:     9998;
  --z-cursor:    9999;
  --z-loader:    10000;
  --z-nav:       100;
  --z-progress:  99;

  /* ---- Spacing ---- */
  --section-pad: clamp(64px, 10vw, 120px);
  --section-pad-md: clamp(48px, 7vw, 80px);
  --container-pad: clamp(20px, 4vw, 40px);
}