/* =========================================================================
   MDT TRAINING — DESIGN TOKENS
   -------------------------------------------------------------------------
   Single source of truth for the theme's colours, type and spacing.
   Brand values below are the CONFIRMED MDT identity, extracted from the live
   mdt.gov.mk compiled stylesheet:

     - Primary brand ...... #702672  (color-main-digital-transformation)
     - Accent (magenta) ... #b02c84
     - Deep blue .......... #11346f  (gradient end / footer bar)
     - Surface (light) .... #f8f8f8
     - Font ............... Mulish (all weights), Google Fonts

   The card system and layout follow eOppiva; the palette follows MDT.
   ========================================================================= */

:root {
    /* ---- MDT BRAND (confirmed from mdt.gov.mk) ---- */
    --color-primary:        #702672;  /* MDT purple — primary brand */
    --color-primary-600:    #5d1f5f;
    --color-primary-400:    #8a3a8c;
    --color-accent:         #b02c84;  /* MDT magenta — accents/links/labels */
    --color-accent-600:     #8f2069;
    --color-accent-soft:    rgba(112, 38, 114, 0.12); /* primary tint for chips on light */
    --color-deep-blue:      #11346f;  /* MDT deep blue — gradient end / footer */

    /* MDT signature gradients (used on hero, cards, footer bands) */
    --gradient-horizontal: linear-gradient(to right, #b02c84, #11346f 66%, #11346f);
    --gradient-vertical:   linear-gradient(to bottom, #b02c84, #11346f 95%, #11346f);

    /* Primary font: Mulish, loaded from Google Fonts (all weights, Latin+Cyrillic).
       Loaded via inc/enqueue.php. The fallback stack is Cyrillic-safe for
       MK/SQ before the webfont loads. */
    --font-primary: "Mulish", ui-sans-serif, system-ui, -apple-system,
                    "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;

    /* ---- eOppiva-inspired dark UI (structure kept, tinted toward MDT) ---- */
    --color-dark:            #0f0f0f;  /* main dark section background (eOppiva base) */
    --color-dark-secondary:  #1a1420;  /* raised dark surface, subtle purple cast */
    --color-dark-border:     #2c2634;

    /* ---- UI neutrals ---- */
    --color-text:        #3e3d3d;      /* MDT body text on light */
    --color-text-muted:  #6b6b6b;
    --color-text-invert: #ffffff;      /* text on dark */
    --color-text-invert-muted: #c6c6c6; /* eOppiva excerpt grey */
    --color-background:  #ffffff;
    --color-surface:     #f8f8f8;      /* MDT light section alt background */
    --color-border:      #e5e5e5;      /* MDT border grey */
    --color-border-soft: #e6e6e6;

    /* ---- Status ---- */
    --color-focus: #ffb703;            /* high-contrast focus ring */

    /* ---- Typography scale (fluid) ---- */
    --fs-100: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
    --fs-200: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
    --fs-300: 1rem;
    --fs-400: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --fs-500: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
    --fs-600: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
    --fs-700: clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem);

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-normal: 1.6;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---- Layout ---- */
    --container-width: 1320px;  /* single shared content width — header, hero, grid, footer all align to this */
    --container-wide: 1320px;   /* kept equal so no section is wider than another */
    --container-narrow: 760px;
    --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

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

    /* ---- Card grid (eOppiva-matched) ---- */
    --card-radius: 8px;                /* eOppiva image-wrapper radius */
    --card-gap-x: 24px;
    --card-gap-y: 48px;
    --card-aspect: 1391 / 1131;        /* original course image ratio */
    --card-aspect-mobile: 1391 / 1131;

    /* ---- Other ---- */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;                  /* MDT uses 20px broadly */
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.08);
    --shadow: 0 3px 6px rgba(0, 0, 0, 0.1);   /* MDT card shadow */
    --shadow-lg: 0 8px 15px rgba(0, 0, 0, 0.12);
    --transition: 200ms cubic-bezier(0.2, 0, 0.2, 1);
    --transition-slow: 320ms cubic-bezier(0.2, 0, 0.2, 1);

    --header-height: 80px;
}