/*
 * Design tokens for Trips4U Blog.
 *
 * Mirrors the React site's tailwind.config.ts (colors, container, radius)
 * and src/index.css (background/foreground/border HSL variables).
 *
 * Changing a brand color here propagates to every component.
 */

:root {
  /* Brand palette (from tailwind.config.ts) */
  --t4u-primary: #2A9D8F;
  --t4u-primary-fg: #ffffff;
  --t4u-secondary: #E9C46A;
  --t4u-secondary-fg: #264653;
  --t4u-accent: #264653;
  --t4u-accent-fg: #ffffff;

  /* Neutrals (from tailwind.config.ts) */
  --t4u-muted: #F4F4F5;
  --t4u-muted-fg: #71717A;

  /* Surface (matches the glass-card recipe in src/index.css) */
  --t4u-card-bg: rgba(255, 255, 255, 0.8);
  --t4u-card-border: rgba(255, 255, 255, 0.2);

  /* Base shell (HSL values straight from src/index.css :root) */
  --t4u-background: hsl(0, 0%, 100%);
  --t4u-foreground: hsl(222.2, 84%, 4.9%);
  --t4u-border: hsl(214.3, 31.8%, 91.4%);
  --t4u-input: hsl(214.3, 31.8%, 91.4%);
  --t4u-ring: hsl(222.2, 84%, 4.9%);

  /* Geometry */
  --t4u-radius: 0.75rem;
  --t4u-radius-sm: calc(0.75rem - 4px);
  --t4u-radius-md: calc(0.75rem - 2px);
  --t4u-container-max: 1400px;
  --t4u-container-pad: 2rem;

  /* Shadows */
  --t4u-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --t4u-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --t4u-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Typography (system stack matches React site default) */
  --t4u-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";

  /* Header height (h-16 in Tailwind = 4rem) */
  --t4u-header-h: 4rem;
}