/* ============================================================
   DoctorReview Pro - Design Tokens
   75% white aesthetic with teal/green/mint accents
   ============================================================ */

:root {
  /* ---------- Brand / Logo Palette ---------- */
  --teal-500: #00C2A8;
  --teal-600: #00B099;
  --teal-700: #009F8A;
  --teal-800: #007F6F;
  --mint-50:  #F4FEFB;
  --mint-100: #DDFBF5;
  --mint-200: #BFF5EB;
  --mint-300: #9CEBDC;

  /* ---------- Surfaces (white-dominant) ---------- */
  --white:        #FFFFFF;
  --surface-1:    #FAFAFA;
  --surface-2:    #F8FAFC;
  --surface-3:    #F1F5F9;
  --hairline:     #EAEEF2;
  --hairline-2:   #E5E9EE;

  /* ---------- Text ---------- */
  --ink-900: #0B1220;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-500: #4B5563;
  --ink-400: #6B7280;
  --ink-300: #9CA3AF;
  --ink-200: #D1D5DB;

  /* ---------- Functional ---------- */
  --warn-bg:   #FFF7F3;
  --warn-line: #FCE7DA;
  --warn-ink:  #B5471A;
  --warn-soft: #F59E6B;

  --gold:      #F5B700;

  /* ---------- Accent green (Problem section) ---------- */
  --green:      #1DA48C;
  --green-deep: #0E7E6B;
  --green-ink:  #11806C;

  /* ---------- Gradients ---------- */
  --grad-brand:      linear-gradient(135deg, #00C2A8 0%, #009F8A 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(0,194,168,0.10) 0%, rgba(0,159,138,0.06) 100%);
  --grad-mint-glow:  radial-gradient(60% 60% at 50% 0%, rgba(0,194,168,0.16) 0%, rgba(0,194,168,0) 60%);
  --grad-page-top:   linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --grad-mesh:
    radial-gradient(40% 35% at 12% 18%, rgba(0,194,168,0.10) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(40% 35% at 88% 28%, rgba(0,159,138,0.08) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(50% 40% at 50% 100%, rgba(221,251,245,0.55) 0%, rgba(255,255,255,0) 70%);

  /* ---------- Shadows (soft, layered) ---------- */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 2px 6px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 24px 60px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-xl:  0 40px 100px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 20px 60px rgba(0, 194, 168, 0.18);
  --shadow-glow-strong: 0 30px 80px rgba(0, 194, 168, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Borders & Radii ---------- */
  --border:        1px solid var(--hairline);
  --border-strong: 1px solid var(--hairline-2);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-3xl: 32px;
  --r-pill: 999px;

  /* ---------- Typography ---------- */
  --font-display: "Satoshi", "General Sans", "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(2.25rem, 4vw, 3.4rem);
  --fs-h1:      clamp(1.9rem, 3.2vw, 2.85rem);
  --fs-h2:      clamp(1.6rem, 2.6vw, 2.15rem);
  --fs-h3:      clamp(1.2rem, 1.7vw, 1.45rem);
  --fs-h4:      1.125rem;
  --fs-body-lg: 1.0625rem;
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.06em;

  /* ---------- Spacing rhythm ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --section-y: clamp(60px, 6.5vw, 100px);

  /* ---------- Layout ---------- */
  --container:      1180px;
  --container-wide: 1300px;
  --container-narrow: 880px;
  --gutter:         clamp(20px, 4vw, 40px);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* ---------- Glass ---------- */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-bg-2:   rgba(255, 255, 255, 0.55);
  --glass-border: 1px solid rgba(255, 255, 255, 0.65);
  --glass-blur:   saturate(180%) blur(20px);

  /* ---------- z-index ---------- */
  --z-nav:    100;
  --z-modal:  500;
  --z-float:  50;
}