/* ==========================================================================
   Design tokens — Dr. Dhiman Roy
   Deep teal + turquoise on white / warm off-white. Serif display, sans body.
   Change brand values here only; components consume these variables.
   ========================================================================== */
:root {
  /* Brand — teal scale */
  --teal-950: #062a2b;
  --teal-900: #0a3b3d;
  --teal-800: #0d4d4f;
  --teal-700: #0f5f61;  /* primary */
  --teal-600: #137476;
  --teal-500: #1a8c8c;
  --turquoise-500: #26a9a6;
  --turquoise-400: #3fc1bc; /* accent */
  --turquoise-200: #a9e3df;
  --turquoise-100: #dcf3f1;
  --turquoise-50:  #eff9f8;

  /* Neutrals — warm */
  --white: #ffffff;
  --cream-50: #fcfaf6;   /* page background */
  --cream-100: #f7f3ec;  /* alternate section */
  --cream-200: #ede6da;
  --stone-300: #d6d1c7;
  --ink-400: #8a9496;
  --ink-500: #5f6b6e;    /* muted text (AA on cream) */
  --ink-700: #34403f;
  --ink-900: #172322;    /* body text */

  /* Accent — restrained academic brass, used sparingly (rules, eyebrows) */
  --brass-500: #a8865a;
  --brass-100: #f3ebdf;

  /* Status */
  --success-600: #1f7a4d; --success-50: #e9f6ef;
  --warning-600: #9a6200; --warning-50: #fdf4e3;
  --danger-600:  #b42318; --danger-50:  #fdeceb;
  --info-600:    var(--teal-600); --info-50: var(--turquoise-50);

  /* Semantic roles */
  --color-bg: var(--cream-50);
  --color-surface: var(--white);
  --color-surface-alt: var(--cream-100);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-heading: var(--teal-950);
  --color-primary: var(--teal-700);
  --color-primary-hover: var(--teal-800);
  --color-accent: var(--turquoise-400);
  --color-border: var(--cream-200);
  --color-border-strong: var(--stone-300);
  --color-focus: var(--turquoise-500);

  /* Typography */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  --text-3xl: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  --text-4xl: clamp(2.5rem, 1.9rem + 2.6vw, 4.1rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;
  --tracking-eyebrow: 0.16em;

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* Shape & depth */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10, 59, 61, 0.06), 0 1px 3px rgba(10, 59, 61, 0.05);
  --shadow-md: 0 6px 18px -6px rgba(10, 59, 61, 0.14), 0 2px 6px rgba(10, 59, 61, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(10, 59, 61, 0.22);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;
}