/* TeachMeMedical — design tokens
   Palette inherited from tmm-web/app/static/css/common-styles.css */

:root {
  --blue:       #0D6EFD;
  --blue-dark:  #0A54C3;
  --blue-light: #E6F0FF;
  --blue-wash:  #E1F2FF;
  --green:      #22C55E;
  --amber:      #F59E0B;

  --ink:        #1E293B;
  --ink-soft:   #64748B;
  --off-white:  #F9FAFB;
  --line:       #E2E8F0;
  --white:      #FFFFFF;

  --surface:    var(--white);
  --surface-2:  var(--off-white);
  --page:       var(--white);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.6rem, 6vw, 5rem);
  --fs-h2:   clamp(2rem, 3.4vw, 3rem);
  --fs-h3:   1.35rem;
  --fs-body: 1.0625rem;
  --fs-sm:   0.9375rem;
  --fs-xs:   0.8125rem;

  --r:      8px;
  --r-lg:   16px;
  --r-pill: 999px;

  --section: clamp(4.5rem, 9vw, 8rem);
  --gap:     clamp(1.25rem, 2.5vw, 2rem);
  --nav-h:   72px;

  --container: 80%;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-ui: 200ms var(--ease);
  --t-in: 700ms var(--ease);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, .12);
}

@media (max-width: 860px) {
  :root { --container: 90%; --nav-h: 64px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue:       #5B9BFF;
    --blue-dark:  #8FBCFF;
    --blue-light: #16243B;
    --blue-wash:  #101B2D;
    --green:      #4ADE80;
    --amber:      #FBBF24;

    --ink:        #E8EDF5;
    --ink-soft:   #97A3B6;
    --off-white:  #0F1622;
    --line:       #24314A;
    --white:      #131C2B;

    --surface:    #131C2B;
    --surface-2:  #0F1622;
    --page:       #0B111B;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --blue:       #5B9BFF;
  --blue-dark:  #8FBCFF;
  --blue-light: #16243B;
  --blue-wash:  #101B2D;
  --green:      #4ADE80;
  --amber:      #FBBF24;

  --ink:        #E8EDF5;
  --ink-soft:   #97A3B6;
  --off-white:  #0F1622;
  --line:       #24314A;
  --white:      #131C2B;

  --surface:    #131C2B;
  --surface-2:  #0F1622;
  --page:       #0B111B;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
}