/* ==========================================================================
   Design tokens — PSTU Department of Marketing (2026 minimal redesign)
   NOTE: Proposed palette only — not official PSTU brand colors.
   Map each token to an Elementor Global Color / Global Font (see ELEMENTOR-CONVERSION.md).
   ========================================================================== */
:root {
  /* Color — brand */
  --color-primary: #0a0a0a;        /* ink: primary buttons, headings */
  --color-primary-700: #262626;
  --color-primary-100: #f1f1ef;
  --color-secondary: #1f4fd8;      /* single accent: links, highlights */
  --color-secondary-100: #ebf0fd;
  --color-accent: #1f4fd8;
  --color-accent-100: #ebf0fd;
  --color-accent-text: #1f4fd8;

  /* Color — neutrals */
  --color-bg: #fafaf9;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f4f2;
  --color-text: #0a0a0a;
  --color-text-muted: #5c5f66;
  --color-border: #e8e8e5;
  --color-border-strong: #d4d4d0;
  --color-on-primary: #ffffff;
  --color-inverse-bg: #0a0a0a;
  --color-inverse-muted: #a3a3a3;

  /* Color — feedback */
  --color-success: #15803d;
  --color-success-100: #e8f6ed;
  --color-warning: #8a5a00;
  --color-warning-100: #fdf4e3;
  --color-error: #c0262d;
  --color-error-100: #fdecec;
  --color-focus: #1f4fd8;

  /* Typography — one family, tight display tracking */
  --font-heading: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2vw, 3rem);
  --fs-3xl: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem);
  --lh-tight: 1.05;
  --lh-base: 1.6;
  --tracking-display: -0.035em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Containers */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* Radii — soft, generous */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows — barely there */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(10, 10, 10, 0.1);
  --shadow-lg: 0 24px 60px -20px rgba(10, 10, 10, 0.22);

  /* Breakpoints (reference): mobile < 768 | tablet 768–1023 | desktop ≥ 1024 */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 500ms;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  --z-header: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}