/* ===================================================================
   DIGITAL DOCTOR — DESIGN SYSTEM DARK UI v1.0
   Source: brief design ChatGPT
   =================================================================== */

:root {
  /* ---- Colors ---- */
  --dd-primary:       #0066FF;
  --dd-primary-hover: #0052CC;
  --dd-bg-page:       #0F172A;
  --dd-bg-card:       #1E293B;
  --dd-surface:       #FFFFFF;
  --dd-surface-alt:   #F1F5F9;
  --dd-text:          #FFFFFF;
  --dd-text-light:    #64748B;
  --dd-border:        #334155;
  --dd-border-light:  #E2E8F0;
  --dd-success:       #16A34A;

  /* ---- Typography ---- */
  --dd-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --dd-hero-size:     clamp(2.8rem, 5vw, 4.5rem);
  --dd-h1-size:       3.5rem;
  --dd-h2-size:       2.625rem;
  --dd-h3-size:       1.875rem;
  --dd-body-size:     1.125rem;
  --dd-small-size:    0.9375rem;
  --dd-hero-weight:   800;
  --dd-h-weight:      700;
  --dd-body-weight:   400;
  --dd-hero-leading:  1.05;
  --dd-body-leading:  1.75;
  --dd-hero-tracking: -0.04em;

  /* ---- Spacing ---- */
  --dd-section-gap:   8rem;
  --dd-card-padding:  2rem;
  --dd-content-max:   1280px;

  /* ---- Border Radius ---- */
  --dd-radius-sm:     12px;
  --dd-radius-md:     20px;
  --dd-radius-lg:     28px;

  /* ---- Shadows ---- */
  --dd-shadow-s:      0 4px 12px rgba(0,0,0,0.15);
  --dd-shadow-md:     0 14px 40px rgba(0,0,0,0.25);
  --dd-shadow-lg:     0 24px 80px rgba(0,0,0,0.35);

  /* ---- Components ---- */
  --btn-height:       54px;
  --btn-radius:       14px;
  --btn-padding:      18px 34px;
  --btn-transition:   250ms ease;
  --input-height:     58px;
  --input-radius:     14px;
  --card-radius:      20px;

  /* ---- Transitions ---- */
  --dd-transition:    250ms ease;
  --dd-transition-lg: 350ms ease;
}

/* ---- Global Reset ---- */
*,*::before,*::after { box-sizing:border-box; }
body { 
  margin:0; 
  font-family: var(--dd-font); 
  color: var(--dd-text); 
  background: var(--dd-bg-page); 
  -webkit-font-smoothing: antialiased; 
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }

/* ===== GLOBAL DARK PAGE ===== */
.dd-page-dark {
  background: var(--dd-bg-page);
  color: var(--dd-text);
  font-family: var(--dd-font);
  min-height: 100vh;
  padding: 128px 24px 96px;
}
.dd-page-dark a { color: var(--dd-primary); }
.dd-page-dark a:hover { color: var(--dd-primary-hover); text-decoration: underline; }
.dd-page-dark h1, .dd-page-dark h2, .dd-page-dark h3 { color: #fff; }
.dd-page-dark p, .dd-page-dark li { color: var(--dd-text-light); line-height: 1.75; font-size: 16px; }
.dd-page-dark .dd-container { max-width: var(--dd-content-max); margin: 0 auto; }