/**
 * IELTSMerit design tokens.
 * Durable CSS custom properties for the child theme.
 * Elementor Kit 505 is intentionally not modified in this phase.
 */

:root {
  /* ——— Colors ——— */
  /* Aligned to homepage mockup: navy + bright gold + white + soft gray */
  --im-color-primary: #1b2a6b;
  --im-color-primary-hover: #152254;
  --im-color-primary-dark: #0f1a45;
  --im-color-accent: #f57538;
  --im-color-accent-hover: #e06528;
  --im-color-background: #ffffff;
  --im-color-surface: #ffffff;
  --im-color-surface-muted: #eef1f7;
  --im-color-text: #1a1d26;
  --im-color-text-muted: #5c6478;
  --im-color-border: #d5dbe8;
  --im-color-success: #2f6b4f;
  --im-color-error: #a33b3b;
  --im-color-on-accent: #0f1a45;
  --im-color-on-primary: #ffffff;

  /* ——— Layout ——— */
  --im-container: 72rem; /* 1152px — near existing ~1140 Elementor width */
  --im-reading-width: 40rem;
  --im-gutter-mobile: 1rem;
  --im-gutter-tablet: 1.5rem;
  --im-gutter-desktop: 2rem;

  /* ——— Spacing scale ——— */
  --im-space-3xs: 0.25rem;
  --im-space-2xs: 0.5rem;
  --im-space-xs: 0.75rem;
  --im-space-sm: 1rem;
  --im-space-md: 1.5rem;
  --im-space-lg: 2rem;
  --im-space-xl: 3rem;
  --im-space-2xl: 4rem;
  --im-space-3xl: 6rem;

  /* ——— Radius ——— */
  --im-radius-sm: 0.375rem;
  --im-radius-md: 0.625rem;
  --im-radius-lg: 0.875rem;
  --im-radius-pill: 999px;

  /* ——— Shadows (subtle) ——— */
  --im-shadow-sm: 0 1px 2px rgba(18, 25, 54, 0.06);
  --im-shadow-md: 0 4px 14px rgba(18, 25, 54, 0.08);
  --im-shadow-lg: 0 12px 32px rgba(18, 25, 54, 0.12);

  /* ——— Motion ——— */
  --im-duration-fast: 150ms;
  --im-duration-base: 220ms;
  --im-duration-slow: 360ms;
  --im-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ——— Breakpoints (reference for media queries) ——— */
  /* mobile: default */
  /* tablet: 768px */
  /* desktop: 1024px */
  /* large: 1280px */

  /* ——— Typography families (mockup: bold sans + rare script accent) ——— */
  --im-font-sans: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --im-font-display: var(--im-font-sans);
  --im-font-script: "Caveat", "Segoe Script", cursive;

  /* ——— Typography: display ——— */
  --im-type-display-family: var(--im-font-display);
  --im-type-display-weight: 700;
  --im-type-display-size: clamp(2.5rem, 1.7rem + 2.8vw, 4rem);
  --im-type-display-line: 1.08;
  --im-type-display-tracking: -0.025em;

  /* ——— Typography: H1 ——— */
  --im-type-h1-family: var(--im-font-display);
  --im-type-h1-weight: 700;
  --im-type-h1-size: clamp(2.125rem, 1.55rem + 2vw, 3.25rem);
  --im-type-h1-line: 1.12;
  --im-type-h1-tracking: -0.02em;

  /* ——— Typography: H2 ——— */
  --im-type-h2-family: var(--im-font-display);
  --im-type-h2-weight: 700;
  --im-type-h2-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.5rem);
  --im-type-h2-line: 1.18;
  --im-type-h2-tracking: -0.015em;

  /* ——— Typography: H3 ——— */
  --im-type-h3-family: var(--im-font-sans);
  --im-type-h3-weight: 700;
  --im-type-h3-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --im-type-h3-line: 1.3;
  --im-type-h3-tracking: 0;

  /* ——— Typography: script accent (decorative only) ——— */
  --im-type-script-family: var(--im-font-script);
  --im-type-script-weight: 400;
  --im-type-script-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  --im-type-script-line: 1.2;
  --im-type-script-tracking: 0;

  /* ——— Typography: body ——— */
  --im-type-body-family: var(--im-font-sans);
  --im-type-body-weight: 400;
  --im-type-body-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --im-type-body-line: 1.65;
  --im-type-body-tracking: 0;

  /* ——— Typography: small ——— */
  --im-type-small-family: var(--im-font-sans);
  --im-type-small-weight: 400;
  --im-type-small-size: 0.875rem;
  --im-type-small-line: 1.5;
  --im-type-small-tracking: 0.01em;

  /* ——— Typography: button ——— */
  --im-type-button-family: var(--im-font-sans);
  --im-type-button-weight: 600;
  --im-type-button-size: 0.9375rem;
  --im-type-button-line: 1.2;
  --im-type-button-tracking: 0.02em;
}

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