/* =============================================================
   DENTAL INSIGHT THEME — Design Tokens & CSS Variables
   ============================================================= */

:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:           #0D1B2A;
  --color-bg-light:     #1E3A5F;
  --color-bg-card:      #112236;
  --color-bg-glass:     rgba(30, 58, 95, 0.45);
  --color-primary:      #00B4A6;
  --color-primary-dark: #00968A;
  --color-primary-glow: rgba(0, 180, 166, 0.25);
  --color-accent:       #0066FF;
  --color-white:        #FFFFFF;
  --color-text-muted:   rgba(255, 255, 255, 0.60);
  --color-text-faint:   rgba(255, 255, 255, 0.35);
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(0, 180, 166, 0.20);

  /* ── Typography ─────────────────────────────────────────── */
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:       0.75rem;    /* 12px */
  --font-size-sm:       0.875rem;   /* 14px */
  --font-size-base:     1rem;       /* 16px */
  --font-size-md:       1.125rem;   /* 18px */
  --font-size-lg:       1.25rem;    /* 20px */
  --font-size-xl:       1.5rem;     /* 24px */
  --font-size-2xl:      2rem;       /* 32px */
  --font-size-3xl:      2.5rem;     /* 40px */
  --font-size-4xl:      3rem;       /* 48px */
  --font-size-5xl:      3.75rem;    /* 60px */
  --font-size-6xl:      4.5rem;     /* 72px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  --line-height-tight:  1.1;
  --line-height-snug:   1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed:1.8;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:   0.08em;
  --letter-spacing-wider:  0.12em;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-narrow: 900px;
  --container-wide:   1440px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --section-gap:      clamp(5rem, 10vw, 10rem);

  /* ── Grid ───────────────────────────────────────────────── */
  --grid-cols:     12;
  --grid-gap:      clamp(1rem, 2vw, 1.5rem);

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 16px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow:  0 0 40px var(--color-primary-glow);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── Transitions & Easing ───────────────────────────────── */
  --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:      cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out:     cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-inout:   cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* ── Navbar ─────────────────────────────────────────────── */
  --navbar-height:     72px;
  --navbar-bg:         transparent;
  --navbar-blur:       blur(20px) saturate(180%);
  --navbar-blur-bg:    rgba(13, 27, 42, 0.80);

  /* ── Z-Index Scale ──────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-cursor:   900;
}