/* KIMA Academy — Design System
   Global CSS entry point. Consumers link ONLY this file.
   Keep this as @import lines only. */

/* KIMA Academy — Webfonts
   Primary typeface: Satoshi (Fontshare CDN, explicit @font-face). Fallback: Inter.
   Satoshi has no libre Google Fonts equivalent; if you need self-hosted binaries,
   upload the Satoshi .woff2 files and point the src: url() below at assets/fonts/. */

/* Inter — highly-readable UI/body face */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fccca918fea4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/aebf2ab4a4ce.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/a2e2c783ca6f.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/46dd4cdca58c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/8db00ff46c67.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/a28eb6d3ccb5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/c940764593d0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fccca918fea4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/aebf2ab4a4ce.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/a2e2c783ca6f.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/46dd4cdca58c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/8db00ff46c67.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/a28eb6d3ccb5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/c940764593d0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fccca918fea4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/aebf2ab4a4ce.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/a2e2c783ca6f.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/46dd4cdca58c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/8db00ff46c67.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/a28eb6d3ccb5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/c940764593d0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fccca918fea4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/aebf2ab4a4ce.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/a2e2c783ca6f.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/46dd4cdca58c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/8db00ff46c67.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/a28eb6d3ccb5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/c940764593d0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Satoshi — display / headline face */
@font-face {
  font-family: 'Satoshi';
  src: url("../fonts/50dca57f0b77.woff2") format('woff2'),
       url("../fonts/243b23f64087.ttf") format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url("../fonts/af02a72246f5.woff2") format('woff2'),
       url("../fonts/7130cef67527.ttf") format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url("../fonts/353a7fbfb447.woff2") format('woff2'),
       url("../fonts/2c122eabbdcf.ttf") format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url("../fonts/bd11b5820231.woff2") format('woff2'),
       url("../fonts/78edaca6fa30.ttf") format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

/* KIMA Academy — Colour Palette
   A bright, modern, opportunity-led colour system.
   Balance: 65–70% white/light · 20–25% blue · 5–10% gold ·
   Deep Blue for contrast and premium moments. */

:root {
  /* ---- Brand core ---- */
  --kima-blue:        #1E66FF;  /* Primary brand / CTA */
  --deep-blue:        #0B1D3D;  /* Text / contrast / premium moments */
  --gold:             #FFC83D;  /* Accent / horizon */
  --white:            #FFFFFF;  /* Primary background */

  /* ---- Extended blues & neutrals ---- */
  --ice-blue:         #E8F2FF;  /* Soft backgrounds */
  --sky-blue:         #6FB6FF;  /* Secondary accent */
  --charcoal:         #1E1E1E;  /* Body text */
  --cool-grey:        #E4E9F1;  /* Dividers / borders */

  /* ---- Tints & shades (derived, for states & depth) ---- */
  --kima-blue-700:    #1550D6;  /* hover / pressed CTA */
  --kima-blue-600:    #1A5CF0;
  --kima-blue-100:    #D6E4FF;  /* soft fills, selected chips */
  --kima-blue-050:    #F2F6FF;  /* faint tints, table stripes */
  --deep-blue-800:    #12294F;  /* elevated dark surfaces */
  --gold-600:         #E8AF23;  /* gold hover */
  --gold-100:         #FFF3D2;  /* gold soft fill */
  --grey-500:         #5B677C;  /* muted / secondary text */
  --grey-300:         #AEB8C7;  /* placeholder text */
  --grey-100:         #F4F6FA;  /* page section wash */

  /* ---- Semantic status ---- */
  --success:          #1FA971;
  --success-100:      #DFF5EC;
  --warning:          #E8AF23;
  --warning-100:      #FFF3D2;
  --danger:           #E5484D;
  --danger-100:       #FBE3E4;
  --info:             #1E66FF;
  --info-100:         #D6E4FF;

  /* ---- Semantic aliases (use these in components) ---- */
  --color-primary:            var(--kima-blue);
  --color-primary-hover:      var(--kima-blue-700);
  --color-accent:             var(--gold);
  --color-accent-hover:       var(--gold-600);

  --surface-page:             var(--white);
  --surface-subtle:           var(--ice-blue);
  --surface-wash:             var(--grey-100);
  --surface-card:             var(--white);
  --surface-dark:             var(--deep-blue);
  --surface-dark-elevated:    var(--deep-blue-800);

  --text-strong:              var(--deep-blue);
  --text-body:                var(--charcoal);
  --text-muted:               var(--grey-500);
  --text-placeholder:         var(--grey-300);
  --text-on-dark:             var(--white);
  --text-on-primary:          var(--white);
  --text-link:                var(--kima-blue);
  --text-link-hover:          var(--kima-blue-700);

  --border-subtle:            var(--cool-grey);
  --border-strong:            var(--grey-300);
  --border-focus:             var(--kima-blue);

  /* ---- Signature gradients (light, optimistic, forward) ---- */
  --gradient-hero:      linear-gradient(135deg, #1E66FF 0%, #0B1D3D 100%); /* @kind color */
  --gradient-sky:       linear-gradient(180deg, #F2F6FF 0%, #E8F2FF 100%); /* @kind color */
  --gradient-horizon:   linear-gradient(90deg, #1E66FF 0%, #6FB6FF 100%); /* @kind color */
  --gradient-gold:      linear-gradient(90deg, #FFC83D 0%, #FFDE85 100%); /* @kind color */
}

/* KIMA Academy — Typography
   Modern, clean, highly readable across digital, print & presentation.
   Primary typeface: Satoshi. Fallback: Inter. */

:root {
  /* ---- Families ---- */
  --font-display: "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Type scale (fluid where useful) ---- */
  --fs-display:   clamp(3rem, 6vw, 5rem); /* @kind font */    /* 48–80px hero */
  --fs-h1:        3rem; /* @kind font */      /* 48px */
  --fs-h2:        2.25rem; /* @kind font */   /* 36px */
  --fs-h3:        1.75rem; /* @kind font */   /* 28px */
  --fs-h4:        1.375rem; /* @kind font */  /* 22px */
  --fs-lead:      1.25rem; /* @kind font */   /* 20px intro */
  --fs-body:      1rem; /* @kind font */      /* 16px */
  --fs-sm:        0.875rem; /* @kind font */  /* 14px */
  --fs-caption:   0.75rem; /* @kind font */   /* 12px labels */

  /* ---- Line heights ---- */
  --lh-tight:     1.05; /* @kind font */   /* display / hero */
  --lh-heading:   1.15; /* @kind font */
  --lh-snug:      1.35; /* @kind font */
  --lh-body:      1.6; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:     -0.02em; /* @kind font */   /* large display */
  --ls-normal:    0; /* @kind font */
  --ls-label:     0.14em; /* @kind font */    /* uppercase labels */
}

/* ---- Specimen helper classes (used by cards & kits) ---- */
.kima-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.kima-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.kima-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--text-strong); }
.kima-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.kima-h4 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--text-strong); }
.kima-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--text-muted); }
.kima-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.kima-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* KIMA Academy — Spacing, radii, layout
   8px base grid. Generous, structured spacing. */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ---- Section rhythm ---- */
  --section-pad-y:   96px;
  --container-max:   1200px;
  --container-pad:   24px;
  --gutter:          24px;

  /* ---- Radii (soft, modern, rounded) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;   /* buttons, inputs, chips */
  --radius-md:   16px;   /* cards */
  --radius-lg:   24px;   /* modular cards, media */
  --radius-xl:   32px;   /* hero panels */
  --radius-pill: 999px;  /* tags, pills, avatars */
}

/* KIMA Academy — Effects
   Shadows, borders, transitions, blur. Soft & optimistic depth. */

:root {
  /* ---- Shadows (cool, blue-tinted, low-contrast) ---- */
  --shadow-xs:   0 1px 2px rgba(11, 29, 61, 0.06);
  --shadow-sm:   0 2px 8px rgba(11, 29, 61, 0.08);
  --shadow-md:   0 8px 24px rgba(11, 29, 61, 0.10);
  --shadow-lg:   0 18px 48px rgba(11, 29, 61, 0.14);
  --shadow-blue: 0 12px 32px rgba(30, 102, 255, 0.28);  /* glow on primary CTAs */
  --shadow-focus: 0 0 0 4px rgba(30, 102, 255, 0.22);   /* focus ring */

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-hair:  1px solid var(--border-subtle);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-standard);

  /* ---- Blur / glass ---- */
  --blur-glass: saturate(160%) blur(14px); /* @kind other */
  --glass-fill: rgba(255, 255, 255, 0.72);
  --glass-fill-dark: rgba(11, 29, 61, 0.55);

  /* ---- Overlays (soft blue image treatment) ---- */
  --overlay-blue: linear-gradient(180deg, rgba(11,29,61,0.05) 0%, rgba(11,29,61,0.55) 100%); /* @kind color */
  --overlay-blue-solid: rgba(30, 102, 255, 0.20);
}