/* Modern Design Tokens & Variables for Dr. Dilip S. Kiyawat's Website */

:root {
  /* Brand Colors from Logo */
  --primary-purple: #5E125E;          /* Plum purple */
  --primary-purple-hover: #450b45;
  --primary-purple-light: #F6EEF6;     /* Soft purple background tint */
  --primary-purple-rgb: 94, 18, 94;

  --secondary-blue: #235293;          /* Medical steel blue */
  --secondary-blue-hover: #193e72;
  --secondary-blue-light: #EEF4FA;      /* Soft blue background tint */
  --secondary-blue-rgb: 35, 82, 147;

  --accent-teal: #48C0C0;             /* Neuron teal */
  --accent-teal-hover: #37a3a3;
  --accent-teal-light: #EBF9F9;
  --accent-teal-rgb: 72, 192, 192;

  /* Neutrals */
  --text-main: #2C2C2C;               /* Dark charcoal for readability */
  --text-muted: #6B7280;              /* Gray for secondary text */
  --text-light: #9CA3AF;
  --bg-light: #F9FAFB;                /* Off-white background */
  --bg-white: #FFFFFF;                /* White background */
  --border-color: rgba(94, 18, 94, 0.08); /* Muted purple border tint */
  --border-color-light: rgba(35, 82, 147, 0.04);

  /* Typography */
  --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Roboto', sans-serif;

  /* Layout */
  --header-height: 85px;
  --header-shrink-height: 72px;
  --header-total-height: calc(var(--header-height) + 38px);
  --max-width: 1280px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(94, 18, 94, 0.05);
  --shadow-lg: 0 20px 40px rgba(94, 18, 94, 0.08);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-smooth: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: all 0.15s ease;
}

@media (max-width: 1024px) {
  :root {
    --header-height: 70px;
    --header-total-height: 70px;
    --header-shrink-height: 64px;
  }
}

@media (max-width: 480px) {
  :root {
    --header-height: 62px;
    --header-total-height: 62px;
    --header-shrink-height: 58px;
  }
}