/* =============================================================
   EUROMASTER — Colors & Type
   Source: Euromaster Brand Guidelines, September 2023 (v18)
   ============================================================= */

/* All brand typefaces are loaded LOCALLY from fonts/ — see @font-face
   declarations below. Open Sans (body + wordmark/logo) and Montserrat
   (titles, digital). No external font CDN. */

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* -------------------------------------------------------------
     PRIMARY COLOURS (the EUROMASTER "flag" — blue / yellow / green)
     ------------------------------------------------------------- */

  /* Blue — main brand colour (Pantone Reflex Blue C, RAL 5002)
     Screen value taken from the official logo vector: #2d4f9e.            */
  --em-blue:           #2d4f9e;   /* on-screen reflex blue                */
  --em-blue-light:     #4a78d4;   /* process-blue gradient stop           */
  --em-blue-dark:      #1b3470;   /* hover / depth                        */

  /* Yellow — life & energy (Pantone Yellow C, RAL 1021)
     Screen value taken from the official logo vector: #fff22d.            */
  --em-yellow:         #fff22d;
  --em-yellow-deep:    #f7a600;   /* shaded gradient stop                  */

  /* Green — expertise / environmental (Pantone 347 C, RAL 6029)
     Screen value taken from the official logo vector: #33a457.            */
  --em-green:          #33a457;
  --em-green-dark:     #1f6b39;   /* shaded gradient stop                  */

  /* -------------------------------------------------------------
     NEUTRALS — three greys + black/white
     ------------------------------------------------------------- */
  --em-black:          #000000;
  --em-black-80:       rgba(0, 0, 0, .80);   /* body text per guidelines */
  --em-grey-dark:      #7C7C7B;   /* Cool Gray 9 C — body / labels      */
  --em-grey:           #B2B2B2;   /* Cool Gray 9 C @ 40% — separators   */
  --em-grey-light:     #E9E9E9;   /* Cool Gray 5 C @ 12% — surfaces     */
  --em-grey-pale:      #F4F4F4;   /* Off-white panel background         */
  --em-white:          #FFFFFF;

  /* POS / retail neutrals (frontage paint refs)                        */
  --em-frontage-grey:  #C8C8C7;   /* RAL 7040 – frontage paint          */
  --em-frontage-white: #ECECE7;   /* RAL 9018 – frontage white          */

  /* -------------------------------------------------------------
     SEMANTIC TOKENS — what the components reach for
     ------------------------------------------------------------- */
  --em-fg-1:           var(--em-black-80);   /* primary body text       */
  --em-fg-2:           var(--em-grey-dark);  /* secondary / muted text  */
  --em-fg-on-blue:     var(--em-white);
  --em-fg-on-yellow:   var(--em-blue);
  --em-fg-on-green:    var(--em-white);
  --em-fg-brand:       var(--em-blue);

  --em-bg-page:        var(--em-white);
  --em-bg-surface:     var(--em-white);
  --em-bg-sunken:      var(--em-grey-pale);
  --em-bg-flag-blue:   var(--em-blue);
  --em-bg-flag-yellow: var(--em-yellow);
  --em-bg-flag-green:  var(--em-green);

  --em-border-subtle:  var(--em-grey-light);
  --em-border-strong:  var(--em-grey);
  --em-divider:        var(--em-grey-light);

  --em-link:           var(--em-blue);
  --em-link-hover:     var(--em-blue-light);

  /* States — kept inside the brand palette                              */
  --em-success:        var(--em-green);
  --em-warning:        var(--em-yellow-deep);
  --em-danger:         #D62828;             /* the brand has no red — flagged */
  --em-info:           var(--em-blue-light);

  /* -------------------------------------------------------------
     LINEAR GRADIENTS — the "shading effect" of the three colours
     The brandbook explicitly REQUIRES gradients here (or flat),
     and forbids picking a mid-colour out of the gradient.
     ------------------------------------------------------------- */
  --em-grad-blue:      linear-gradient(180deg, var(--em-blue) 0%, var(--em-blue-light) 100%);
  --em-grad-yellow:    linear-gradient(180deg, var(--em-yellow-deep) 0%, var(--em-yellow) 100%);
  --em-grad-green:     linear-gradient(180deg, var(--em-green-dark) 0%, var(--em-green) 100%);

  /* -------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------
     PRINT   — titles: Montserrat, body: Open Sans
     DIGITAL — titles: Montserrat, body: Open Sans
     LOGO    — Neo Sans Pro Bold (proprietary, no file shipped). The
               wordmark in the logo SVG uses Open Sans heavy as the
               permitted in-house substitute.
     OFFICE  — Arial (Word / PowerPoint only)                            */

  --em-font-display:   "Montserrat", "Arial", system-ui, sans-serif;
  --em-font-heading:   "Montserrat", "Arial", system-ui, sans-serif;
  --em-font-body:      "Open Sans", "Arial", system-ui, sans-serif;
  --em-font-logo:      "Open Sans", "Arial", system-ui, sans-serif;   /* wordmark — substitutes for Neo Sans Pro */
  --em-font-office:    "Arial", "Helvetica", system-ui, sans-serif;
  --em-font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Weights actually used by the system */
  --em-w-light:        300;
  --em-w-regular:      400;
  --em-w-medium:       500;
  --em-w-semibold:     600;
  --em-w-bold:         700;
  --em-w-extrabold:    800;

  /* Type scale — anchored to a 16px body                                 */
  --em-fs-display:     56px;       /* huge POS-style headers              */
  --em-fs-h1:          40px;
  --em-fs-h2:          32px;
  --em-fs-h3:          24px;
  --em-fs-h4:          20px;
  --em-fs-body-lg:     18px;
  --em-fs-body:        16px;
  --em-fs-body-sm:     14px;
  --em-fs-caption:     12px;
  --em-fs-overline:    11px;

  --em-lh-tight:       1.1;
  --em-lh-snug:        1.25;
  --em-lh-body:        1.55;
  --em-lh-loose:       1.75;

  --em-ls-tight:       -0.01em;
  --em-ls-normal:      0;
  --em-ls-wide:        0.04em;
  --em-ls-overline:    0.12em;  /* small caps headers, tagline-like      */

  /* -------------------------------------------------------------
     SPACING — 4px base, doubled (4/8/12/16/24/32/48/64/96)
     ------------------------------------------------------------- */
  --em-space-1:        4px;
  --em-space-2:        8px;
  --em-space-3:        12px;
  --em-space-4:        16px;
  --em-space-5:        24px;
  --em-space-6:        32px;
  --em-space-7:        48px;
  --em-space-8:        64px;
  --em-space-9:        96px;

  /* -------------------------------------------------------------
     RADII — POS / signage is mostly square; UI softens slightly
     ------------------------------------------------------------- */
  --em-radius-none:    0;
  --em-radius-sm:      4px;
  --em-radius-md:      8px;
  --em-radius-lg:      12px;
  --em-radius-pill:    999px;
  --em-radius-circle:  50%;   /* the "proprietary circle" for pictograms */

  /* -------------------------------------------------------------
     ELEVATION — low and clean, matches the "pure & modern" charter
     ------------------------------------------------------------- */
  --em-shadow-1:       0 1px 2px rgba(27, 52, 112, .06);
  --em-shadow-2:       0 2px 6px rgba(27, 52, 112, .08), 0 1px 2px rgba(27, 52, 112, .06);
  --em-shadow-3:       0 6px 18px rgba(27, 52, 112, .10), 0 2px 4px rgba(27, 52, 112, .06);
  --em-shadow-blue:    0 8px 24px rgba(45, 79, 158, .28);
  --em-shadow-yellow:  0 8px 24px rgba(247, 166, 0, .25);
  --em-shadow-green:   0 8px 24px rgba(51, 164, 87, .25);

  /* -------------------------------------------------------------
     MOTION — minimal; the brand doesn't talk anims, keep crisp
     ------------------------------------------------------------- */
  --em-ease-out:       cubic-bezier(.2, .8, .2, 1);
  --em-ease-in-out:    cubic-bezier(.4, 0, .2, 1);
  --em-dur-fast:       120ms;
  --em-dur-base:       180ms;
  --em-dur-slow:       320ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES — use these in components, not raw vars
   ============================================================= */
.em-display {
  font-family: var(--em-font-display);
  font-weight: var(--em-w-extrabold);
  font-size:   var(--em-fs-display);
  line-height: var(--em-lh-tight);
  letter-spacing: var(--em-ls-tight);
  color:       var(--em-fg-brand);
  text-transform: uppercase;
}
.em-h1 {
  font-family: var(--em-font-heading);
  font-weight: var(--em-w-bold);
  font-size:   var(--em-fs-h1);
  line-height: var(--em-lh-snug);
  letter-spacing: var(--em-ls-tight);
  color:       var(--em-fg-brand);
}
.em-h2 {
  font-family: var(--em-font-heading);
  font-weight: var(--em-w-bold);
  font-size:   var(--em-fs-h2);
  line-height: var(--em-lh-snug);
  color:       var(--em-fg-brand);
}
.em-h3 {
  font-family: var(--em-font-heading);
  font-weight: var(--em-w-semibold);
  font-size:   var(--em-fs-h3);
  line-height: var(--em-lh-snug);
  color:       var(--em-fg-1);
}
.em-h4 {
  font-family: var(--em-font-heading);
  font-weight: var(--em-w-semibold);
  font-size:   var(--em-fs-h4);
  line-height: var(--em-lh-snug);
  color:       var(--em-fg-1);
}
.em-lead {
  font-family: var(--em-font-body);
  font-weight: var(--em-w-regular);
  font-size:   var(--em-fs-body-lg);
  line-height: var(--em-lh-body);
  color:       var(--em-fg-1);
}
.em-body {
  font-family: var(--em-font-body);
  font-weight: var(--em-w-regular);
  font-size:   var(--em-fs-body);
  line-height: var(--em-lh-body);
  color:       var(--em-fg-1);
}
.em-small {
  font-family: var(--em-font-body);
  font-weight: var(--em-w-regular);
  font-size:   var(--em-fs-body-sm);
  line-height: var(--em-lh-body);
  color:       var(--em-fg-2);
}
.em-caption {
  font-family: var(--em-font-body);
  font-weight: var(--em-w-semibold);
  font-size:   var(--em-fs-caption);
  line-height: var(--em-lh-snug);
  color:       var(--em-fg-2);
}
.em-overline {
  font-family: var(--em-font-heading);
  font-weight: var(--em-w-bold);
  font-size:   var(--em-fs-overline);
  line-height: var(--em-lh-snug);
  letter-spacing: var(--em-ls-overline);
  text-transform: uppercase;
  color:       var(--em-fg-brand);
}

/* In running copy: the brand demands two specific casings for "Euromaster".
   See README → CONTENT FUNDAMENTALS. Helpers, not enforced. */
.em-brand-shouting { text-transform: uppercase; letter-spacing: var(--em-ls-wide); }
.em-brand-entity   { text-transform: none; }