/* ============================================================
   MANIGOD KIDS CLUB — DESIGN TOKENS
   colors_and_type.css
   Strict 2-colour identity: forest green #12351c + cream #fffbd6
   No extra accent colours. No decorative gradients.
   Typeface: Clash Grotesk (all weights + variable)
   ============================================================ */

/* ---------- FONT FACES ---------- */
@font-face{
  font-family:"Clash Grotesk";
  src:url("fonts/ClashGrotesk-Extralight.ttf") format("truetype");
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash Grotesk";
  src:url("fonts/ClashGrotesk-Light.ttf") format("truetype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash Grotesk";
  src:url("fonts/ClashGrotesk-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash Grotesk";
  src:url("fonts/ClashGrotesk-Medium.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash Grotesk";
  src:url("fonts/ClashGrotesk-Semibold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash Grotesk";
  src:url("fonts/ClashGrotesk-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
/* Variable font — used for fine optical control on huge hero titles */
@font-face{
  font-family:"Clash Grotesk Variable";
  src:url("fonts/ClashGrotesk-Variable.ttf") format("truetype-variations");
  font-weight:200 700; font-style:normal; font-display:swap;
}

:root{
  /* ============ COLOR — the only two brand colours ============ */
  --mkc-green:#12351c;       /* forest green — primary ink + dark surfaces   */
  --mkc-cream:#fffbd6;       /* warm cream  — primary paper + light surfaces  */

  /* Functional tints — NOT new colours: opacity/mixes of the two above.
     Use sparingly for depth (panels, borders, overlays, hovers).          */
  --mkc-green-700:#1c4527;   /* green lifted ~8% toward cream — raised panel on dark */
  --mkc-green-600:#2a5535;   /* green lifted further — hover on dark surfaces        */
  --mkc-green-deep:#0d2614;  /* green pushed down — deep shadow tone (never pure black)*/

  /* Cream on green / green on cream, expressed as alpha for glass + states */
  --mkc-green-04:rgba(18,53,28,.04);
  --mkc-green-06:rgba(18,53,28,.06);
  --mkc-green-08:rgba(18,53,28,.08);
  --mkc-green-12:rgba(18,53,28,.12);
  --mkc-green-16:rgba(18,53,28,.16);
  --mkc-green-24:rgba(18,53,28,.24);
  --mkc-green-40:rgba(18,53,28,.40);
  --mkc-green-60:rgba(18,53,28,.60);
  --mkc-green-80:rgba(18,53,28,.80);

  --mkc-cream-08:rgba(255,251,214,.08);
  --mkc-cream-12:rgba(255,251,214,.12);
  --mkc-cream-16:rgba(255,251,214,.16);
  --mkc-cream-24:rgba(255,251,214,.24);
  --mkc-cream-40:rgba(255,251,214,.40);
  --mkc-cream-60:rgba(255,251,214,.60);
  --mkc-cream-72:rgba(255,251,214,.72);
  --mkc-cream-90:rgba(255,251,214,.90);

  /* ---------- SEMANTIC SURFACES ---------- */
  --mkc-bg:           var(--mkc-cream);   /* default page background  */
  --mkc-bg-ink:       var(--mkc-green);   /* inverted / dark sections */
  --mkc-surface:      var(--mkc-cream);   /* card on light            */
  --mkc-surface-ink:  var(--mkc-green-700);/* card on dark            */

  /* ---------- SEMANTIC TEXT ---------- */
  --mkc-ink:          var(--mkc-green);          /* text on cream           */
  --mkc-ink-soft:     rgba(18,53,28,.66);        /* secondary text on cream */
  --mkc-ink-faint:    rgba(18,53,28,.46);        /* captions / meta         */
  --mkc-paper:        var(--mkc-cream);          /* text on green           */
  --mkc-paper-soft:   rgba(255,251,214,.72);     /* secondary text on green */
  --mkc-paper-faint:  rgba(255,251,214,.52);     /* captions on green       */

  /* ---------- BORDERS ---------- */
  --mkc-border:       rgba(18,53,28,.14);        /* hairline on cream       */
  --mkc-border-strong:rgba(18,53,28,.28);
  --mkc-border-paper: rgba(255,251,214,.18);     /* hairline on green       */

  /* ---------- GLASS / FROSTED (subtle, never tech) ---------- */
  --mkc-glass-cream:  rgba(255,251,214,.62);     /* frosted cream on imagery */
  --mkc-glass-green:  rgba(18,53,28,.42);        /* frosted green veil       */
  --mkc-glass-blur:   16px;
  --mkc-glass-blur-sm:10px;

  /* Image overlay veils — neutral, functional, never coloured/gradient-y */
  --mkc-veil-green:   rgba(13,38,20,.46);        /* darken for legibility    */
  --mkc-veil-green-strong:rgba(13,38,20,.64);

  /* ============ TYPOGRAPHY ============ */
  --mkc-font:"Clash Grotesk","Clash Grotesk Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mkc-font-display:"Clash Grotesk Variable","Clash Grotesk",sans-serif;

  /* weights */
  --mkc-w-extralight:200;
  --mkc-w-light:300;
  --mkc-w-regular:400;
  --mkc-w-medium:500;
  --mkc-w-semibold:600;
  --mkc-w-bold:700;

  /* Fluid type scale (desktop→mobile via clamp) */
  --mkc-text-hero:    clamp(2.75rem, 8.5vw, 7rem);   /* H1 hero display      */
  --mkc-text-h1:      clamp(2.25rem, 5vw, 4rem);     /* page H1              */
  --mkc-text-h2:      clamp(1.875rem, 3.4vw, 3rem);  /* section title        */
  --mkc-text-h3:      clamp(1.375rem, 2vw, 1.875rem);/* card / block title   */
  --mkc-text-h4:      clamp(1.125rem, 1.4vw, 1.375rem);
  --mkc-text-lead:    clamp(1.125rem, 1.5vw, 1.375rem);/* intro paragraph     */
  --mkc-text-body:    1.0625rem;                     /* 17px base body       */
  --mkc-text-sm:      0.9375rem;                     /* 15px small           */
  --mkc-text-label:   0.8125rem;                     /* 13px label / tag     */
  --mkc-text-tiny:    0.6875rem;                     /* 11px micro caption   */

  /* line-heights */
  --mkc-lh-tight:1.02;     /* hero display          */
  --mkc-lh-snug:1.12;      /* headings              */
  --mkc-lh-mid:1.35;       /* leads                 */
  --mkc-lh-body:1.6;       /* body copy             */

  /* letter-spacing */
  --mkc-ls-hero:-0.03em;   /* tighten huge display  */
  --mkc-ls-head:-0.015em;
  --mkc-ls-label:0.12em;   /* uppercase labels      */

  /* ============ RADII — very rounded identity ============ */
  --mkc-r-xs:10px;
  --mkc-r-sm:16px;
  --mkc-r-md:24px;     /* buttons inputs small cards            */
  --mkc-r-lg:32px;     /* cards                                 */
  --mkc-r-xl:40px;     /* large vignette cards                  */
  --mkc-r-2xl:56px;    /* hero blocks / section shells          */
  --mkc-r-pill:999px;  /* capsules: nav, buttons, tags, switch  */

  /* ============ SPACING (8px base) ============ */
  --mkc-s-1:4px;  --mkc-s-2:8px;  --mkc-s-3:12px; --mkc-s-4:16px;
  --mkc-s-5:20px; --mkc-s-6:24px; --mkc-s-8:32px; --mkc-s-10:40px;
  --mkc-s-12:48px;--mkc-s-16:64px;--mkc-s-20:80px;--mkc-s-24:96px;
  --mkc-s-32:128px;

  /* section vertical rhythm */
  --mkc-section-y:clamp(64px,9vw,140px);
  --mkc-gutter:clamp(20px,5vw,64px);   /* page side margins */
  --mkc-maxw:1280px;                   /* content max width */
  --mkc-maxw-wide:1480px;

  /* ============ SHADOWS — soft, green-tinted, never harsh ============ */
  --mkc-shadow-sm:0 2px 8px rgba(13,38,20,.06);
  --mkc-shadow-md:0 10px 30px rgba(13,38,20,.10);
  --mkc-shadow-lg:0 24px 60px rgba(13,38,20,.16);
  --mkc-shadow-xl:0 40px 90px rgba(13,38,20,.22);
  --mkc-shadow-card:0 18px 48px rgba(13,38,20,.14);

  /* ============ MOTION ============ */
  --mkc-ease:cubic-bezier(.22,.61,.36,1);      /* gentle ease-out      */
  --mkc-ease-soft:cubic-bezier(.4,.14,.3,1);
  --mkc-dur-fast:180ms;
  --mkc-dur:340ms;
  --mkc-dur-slow:620ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS (opt-in, scope under .mkc)
   ============================================================ */
.mkc{
  font-family:var(--mkc-font);
  color:var(--mkc-ink);
  background:var(--mkc-bg);
  font-weight:var(--mkc-w-regular);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.mkc h1,.mkc h2,.mkc h3,.mkc h4{
  margin:0;
  font-weight:var(--mkc-w-semibold);
  line-height:var(--mkc-lh-snug);
  letter-spacing:var(--mkc-ls-head);
  text-wrap:balance;
}
.mkc .mkc-hero-title{
  font-family:var(--mkc-font-display);
  font-size:var(--mkc-text-hero);
  font-weight:var(--mkc-w-semibold);
  line-height:var(--mkc-lh-tight);
  letter-spacing:var(--mkc-ls-hero);
  text-wrap:balance;
}
.mkc h1{font-size:var(--mkc-text-h1);}
.mkc h2{font-size:var(--mkc-text-h2);}
.mkc h3{font-size:var(--mkc-text-h3);font-weight:var(--mkc-w-medium);}
.mkc h4{font-size:var(--mkc-text-h4);font-weight:var(--mkc-w-medium);}

.mkc .mkc-lead{
  font-size:var(--mkc-text-lead);
  line-height:var(--mkc-lh-mid);
  font-weight:var(--mkc-w-regular);
  color:var(--mkc-ink-soft);
  text-wrap:pretty;
}
.mkc p{
  margin:0;
  font-size:var(--mkc-text-body);
  line-height:var(--mkc-lh-body);
  text-wrap:pretty;
}
.mkc .mkc-label{
  font-size:var(--mkc-text-label);
  font-weight:var(--mkc-w-semibold);
  letter-spacing:var(--mkc-ls-label);
  text-transform:uppercase;
}
.mkc small,.mkc .mkc-caption{
  font-size:var(--mkc-text-sm);
  color:var(--mkc-ink-soft);
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}