/*
 * StudyGuard — design tokens.
 * Change a colour, a font or a spacing value here and the whole site follows.
 * Palette: white, grey and dark navy, with a muted green accent and gold for Oxbridge.
 */
:root {
  /* Navy */
  --navy-900: #0e1d33;
  --navy-800: #152a45;
  --navy-700: #1f3a5f;
  --navy-500: #33507a;

  /* Neutrals */
  --white: #ffffff;
  --grey-050: #f7f8fa;
  --grey-100: #eef1f5;
  --grey-200: #dfe4eb;
  --grey-300: #ccd3dd;
  --grey-500: #8a93a1;
  --grey-600: #626c7b;
  --grey-700: #4a5361;

  /* Accents */
  --green-050: #edf3ef;
  --green-200: #cddfd3;
  --green-600: #3f6b52;
  --green-700: #325541;
  --gold-050: #faf6ee;
  --gold-200: #ead9b8;
  --gold-600: #a9853f;
  --gold-700: #8a6b31;

  --danger-600: #a8271f;

  /* Semantic */
  --color-text: var(--navy-900);
  --color-text-muted: var(--grey-600);
  --color-heading: var(--navy-800);
  --color-surface: var(--white);
  --color-surface-muted: var(--grey-050);
  --color-border: var(--grey-200);
  --color-accent: var(--green-600);
  --color-accent-strong: var(--green-700);
  --color-focus: var(--navy-500);

  /* Type */
  --font-heading: "Montserrat", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --text-4xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --leading-tight: 1.2;
  --leading-normal: 1.65;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--color-border);

  /* Elevation. One scale, from a resting card to a lifted one under the cursor. */
  --shadow-card: 0 1px 2px rgba(14, 29, 51, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 29, 51, 0.08), 0 1px 2px rgba(14, 29, 51, 0.04);
  --shadow-md: 0 6px 16px -6px rgba(14, 29, 51, 0.16), 0 2px 6px -2px rgba(14, 29, 51, 0.08);
  --shadow-lg: 0 18px 40px -18px rgba(14, 29, 51, 0.28), 0 6px 14px -8px rgba(14, 29, 51, 0.12);
  --shadow-accent: 0 10px 24px -12px rgba(63, 107, 82, 0.45);
  --shadow-gold: 0 10px 24px -12px rgba(169, 133, 63, 0.45);

  /* Motion. Every transition on the site uses these, so the pace stays even.
     Anything decorative is switched off under prefers-reduced-motion. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 130ms;
  --duration: 220ms;
  --duration-slow: 420ms;
  --lift: -3px;
  --lift-lg: -6px;

  /* Layout */
  --container-width: 1140px;
  --container-gutter: var(--space-5);
  --header-height: 72px;
}