/* Klinik Blog · Material You (MD3) · seed #6750A4 · tonal surfaces · pills */

:root {
  /* tonal palette */
  --color-primary: #6750a4;
  --color-on-primary: #ffffff;
  --color-primary-hover: rgb(103 80 164 / 0.9);
  --color-primary-active: rgb(103 80 164 / 0.8);
  --color-secondary-container: #e8def8;
  --color-on-secondary-container: #1d192b;
  --color-tertiary: #7d5260;
  --color-surface: #fffbfe;
  --color-surface-container: #f3edf7;
  --color-surface-container-low: #e7e0ec;
  --color-on-surface: #1c1b1f;
  --color-on-surface-variant: #49454f;
  --color-outline: #79747e;
  --color-on-surface-50: rgb(28 27 31 / 0.5);

  /* legacy aliases (keep selectors working) */
  --color-paper: var(--color-surface);
  --color-paper-2: var(--color-surface-container-low);
  --color-ink: var(--color-on-surface);
  --color-muted: var(--color-on-surface-variant);
  --color-rule: var(--color-outline);
  --color-rule-strong: var(--color-outline);
  --color-accent: var(--color-primary);
  --color-accent-deep: #4f378b;
  --color-focus: var(--color-primary);

  /* fonts */
  --font-display: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Roboto", ui-sans-serif, system-ui, sans-serif;

  /* type scale (MD3) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 3rem;
  --text-display: clamp(2.25rem, 5vw, 3.5rem);

  /* radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-full: 9999px;

  /* shadows (soft, low-opacity) */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.07), 0 1px 3px rgb(0 0 0 / 0.09);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.1);
  --shadow-3: 0 4px 8px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.12);

  /* motion */
  --ease-md: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 200ms;
  --dur-std: 300ms;

  /* layout */
  --measure: 44rem;
  --page-gutter: 1rem;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
}