/* =========================================================================
   Skillify — Core Design Tokens
   Forked from the Zonneplan token set. Skillify reuses the same palette,
   type families, spacing, radii and shadows; what's specific to Skillify
   lives at the bottom (display sizes used in the event landing, the Mark
   variants documented in SKILL.md).

   Import this first in any page.
   ========================================================================= */

@font-face {
  font-family: "Modern Gothic";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ModernGothic-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Modern Gothic";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ModernGothic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Modern Gothic";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ModernGothic-Medium.woff2") format("woff2");
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ====================================================================== */
  /* ===== PRIMARY ======================================================== */
  /* ====================================================================== */
  --zp-amp:          #29D96F;  /* Primary brand green — disk fill of the Mark */
  --zp-amp-dark:     #009E3F;  /* Darker variant, AA on white */
  --zp-lumen:        #F5F5F4;  /* Warm off-white page background */
  --zp-white:        #FFFFFF;

  /* ====================================================================== */
  /* ===== TEXT — "Grid" ================================================= */
  /* ====================================================================== */
  --zp-grid-01:      #082626;  /* Primary ink — near-black deep teal */
  --zp-grid-02:      #616666;  /* Secondary text / captions */

  /* ====================================================================== */
  /* ===== NEUTRALS — "Tera" ============================================= */
  /* ====================================================================== */
  --zp-tera-00:      #FFFFFF;
  --zp-tera-01:      #E8E8E7;
  --zp-tera-02:      #E0DFDC;
  --zp-tera-03:      #D1CECA;
  --zp-tera-04:      #B8B5B1;

  /* ====================================================================== */
  /* ===== SECONDARY — accent pairs (soft + bright) ====================== */
  /* ====================================================================== */
  --zp-ozone:          #CAD9E5;
  --zp-ozone-bright:   #95C4E5;
  --zp-sheen:          #E5E5AE;
  --zp-sheen-bright:   #E5E573;
  --zp-sunset:         #FFF4C2;
  --zp-sunset-bright:  #EEDA81;
  --zp-aura:           #C0B0E4;
  --zp-aura-bright:    #9C82D9;
  --zp-wave:           #A8D5C3;
  --zp-wave-bright:    #5FCCA5;

  /* ====================================================================== */
  /* ===== UI — semantic ================================================= */
  /* ====================================================================== */
  --zp-success:      #009E3F;
  --zp-warning:      #E56E32;
  --zp-danger:       #D53A3A;
  --zp-info:         #95C4E5;

  /* ====================================================================== */
  /* ===== SURFACE roles ================================================= */
  /* ====================================================================== */
  --zp-bg:           var(--zp-lumen);
  --zp-surface:      var(--zp-white);
  --zp-surface-alt:  var(--zp-tera-01);
  --zp-ink:          var(--zp-grid-01);
  --zp-ink-muted:    var(--zp-grid-02);
  --zp-line:         var(--zp-tera-02);
  --zp-line-strong:  var(--zp-tera-03);

  /* ----- Type families -------------------------------------------------- */
  --zp-font-display: "Modern Gothic", "DM Sans", "Aeonik", Inter, system-ui, sans-serif;
  --zp-font-body:    "Aeonik", Inter, "DM Sans", system-ui, sans-serif;
  --zp-font-ui:      "Inter", "Aeonik", system-ui, sans-serif;

  /* ----- Type scale ---------------------------------------------------- */
  --zp-text-9xl:     128px;
  --zp-text-8xl:     96px;
  --zp-text-7xl:     72px;
  --zp-text-6xl:     60px;
  --zp-text-5xl:     48px;
  --zp-text-4xl:     36px;
  --zp-text-3xl:     30px;
  --zp-text-2xl:     24px;
  --zp-text-xl:      20px;
  --zp-text-lg:      18px;
  --zp-text-base:    16px;
  --zp-text-sm:      14px;
  --zp-text-xs:      12px;

  --zp-lh-display:   0.92;
  --zp-lh-heading:   1.08;
  --zp-lh-snug:      1.20;
  --zp-lh-body:      1.56;

  --zp-ls-9xl:       -0.045em;
  --zp-ls-7xl:       -0.040em;
  --zp-ls-5xl:       -0.030em;
  --zp-ls-3xl:       -0.020em;
  --zp-ls-xl:        -0.010em;
  --zp-ls-body:       0.000em;
  --zp-ls-caps:       0.080em;

  --zp-fw-light:     300;
  --zp-fw-regular:   400;
  --zp-fw-medium:    500;
  --zp-fw-bold:      700;

  /* ----- Spacing (4px base) -------------------------------------------- */
  --zp-space-1:  4px;  --zp-space-2:  8px;  --zp-space-3:  12px;
  --zp-space-4:  16px; --zp-space-5:  20px; --zp-space-6:  24px;
  --zp-space-8:  32px; --zp-space-10: 40px; --zp-space-12: 48px;
  --zp-space-16: 64px; --zp-space-20: 80px; --zp-space-24: 96px;

  /* ----- Radius — pillowy & friendly ---------------------------------- */
  --zp-radius-xs:    4px;
  --zp-radius-sm:    8px;
  --zp-radius-md:    12px;
  --zp-radius-lg:    16px;
  --zp-radius-xl:    24px;
  --zp-radius-2xl:   32px;
  --zp-radius-pill:  999px;

  /* ----- Shadows — soft & grounded ------------------------------------ */
  --zp-shadow-xs:    0 1px 2px rgba(8,13,20,0.04);
  --zp-shadow-sm:    0 2px 6px rgba(8,13,20,0.06);
  --zp-shadow-md:    0 8px 24px rgba(8,13,20,0.08);
  --zp-shadow-lg:    0 16px 48px rgba(8,13,20,0.10);
  --zp-shadow-focus: 0 0 0 4px rgba(41,217,111,0.35);

  /* ----- Motion ------------------------------------------------------- */
  --zp-ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --zp-dur-fast:     140ms;
  --zp-dur-base:     220ms;
  --zp-dur-slow:     360ms;
}

/* ---------------------------------------------------------------------------
   Base page
   --------------------------------------------------------------------------- */
html, body {
  margin: 0;
  background: var(--zp-bg);
  color: var(--zp-ink);
  font-family: var(--zp-font-body);
  font-size: var(--zp-text-base);
  line-height: var(--zp-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }