/* ========================================================================
   ALPHA EDGE — Color & Type Foundations
   Quantitative Advisory · Jakarta, Indonesia
   ======================================================================== */

/* ── Montserrat (local variable font) — primary sans ──────────────────── */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.woff2') format('woff2'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       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.woff2') format('woff2'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── Open Sans (local) — secondary + metadata ─────────────────────────── */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Light.woff2') format('woff2'),
       url('fonts/OpenSans-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-LightItalic.woff2') format('woff2'),
       url('fonts/OpenSans-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
       url('fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic.woff2') format('woff2'),
       url('fonts/OpenSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Medium.woff2') format('woff2'),
       url('fonts/OpenSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-MediumItalic.woff2') format('woff2'),
       url('fonts/OpenSans-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-SemiBold.woff2') format('woff2'),
       url('fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-SemiBoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
       url('fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-BoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-ExtraBold.woff2') format('woff2'),
       url('fonts/OpenSans-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}

/* ── Open Sans Condensed (local) — for compressed metadata / labels ───── */
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-Light.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-LightItalic.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-Regular.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-Italic.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-Medium.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-MediumItalic.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-SemiBold.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-SemiBoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-Bold.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-BoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-ExtraBold.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-ExtraBoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans_Condensed-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}

/* ── Open Sans SemiCondensed (local) — intermediate width ─────────────── */
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-Light.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-LightItalic.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-Regular.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-Italic.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-Medium.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-MediumItalic.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-SemiBold.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-SemiBoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-Bold.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-BoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-ExtraBold.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-ExtraBoldItalic.woff2') format('woff2'),
       url('fonts/OpenSans_SemiCondensed-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}

:root {
  /* ── BRAND COLORS ─────────────────────────────────────────────────── */
  --ae-deadly-depths:     #111144;   /* Primary dark — anchors brand */
  --ae-deep-space-royal:  #223382;   /* Secondary blue — structure */
  --ae-aster-blue:        #9BACD8;   /* Data viz, soft accents */
  --ae-luster-white:      #F4F1EC;   /* Background warm-off-white */
  --ae-jodhpur-tan:       #DAD1C8;   /* Neutral, dividers */
  --ae-habanero:          #F98513;   /* Accent orange — CTAs, signals */
  --ae-habanero-light:    #FBA94A;   /* Gradient highlight */
  --ae-habanero-deep:     #E25A0F;   /* Gradient mid */
  --ae-night:             #0A0A30;   /* Below-Depths (gradient anchor) */

  /* ── BRAND GRADIENTS (signature multidimensional treatment) ───────── */
  --ae-grad-delta:        linear-gradient(135deg, #F98513 0%, #E25A0F 55%, #223382 100%);
  --ae-grad-delta-soft:   linear-gradient(135deg, #FBA94A 0%, #F98513 50%, #9BACD8 100%);
  --ae-grad-night:        linear-gradient(180deg, #0A0A30 0%, #111144 100%);
  --ae-grad-royal:        linear-gradient(135deg, #223382 0%, #111144 100%);
  --ae-grad-amber:        linear-gradient(180deg, #FBA94A 0%, #F98513 100%);
  --ae-grad-prism:        conic-gradient(from 210deg at 50% 50%, #F98513, #E25A0F, #223382, #111144, #F98513);

  /* ── SEMANTIC FG / BG ─────────────────────────────────────────────── */
  --ae-bg:                var(--ae-luster-white);
  --ae-bg-elevated:       #FFFFFF;
  --ae-bg-dark:           var(--ae-deadly-depths);
  --ae-bg-dark-2:         var(--ae-deep-space-royal);

  --ae-fg:                var(--ae-deadly-depths);
  --ae-fg-muted:          rgba(17,17,68,0.62);
  --ae-fg-subtle:         rgba(17,17,68,0.42);
  --ae-fg-faint:          rgba(17,17,68,0.22);
  --ae-fg-on-dark:        var(--ae-luster-white);
  --ae-fg-muted-on-dark:  rgba(244,241,236,0.62);
  --ae-fg-subtle-on-dark: rgba(244,241,236,0.38);

  --ae-accent:            var(--ae-habanero);
  --ae-accent-fg:         var(--ae-deadly-depths); /* text color sitting on amber CTA */

  --ae-border:            var(--ae-jodhpur-tan);
  --ae-border-strong:     #C4B9AD;
  --ae-border-on-dark:    rgba(155,172,216,0.18);

  /* Status (rare) */
  --ae-positive:          var(--ae-habanero);   /* gains use accent */
  --ae-negative:          #9A3530;
  --ae-neutral:           var(--ae-aster-blue);

  /* ── TYPE TOKENS ──────────────────────────────────────────────────── */
  --ae-font-sans:         'Montserrat', 'Open Sans', system-ui, -apple-system, sans-serif;
  --ae-font-secondary:    'Open Sans', 'Montserrat', system-ui, sans-serif;
  --ae-font-mono:         'Open Sans', system-ui, sans-serif; /* metadata uses Open Sans tracked-out */
  --ae-font-condensed:    'Open Sans Condensed', 'Open Sans', system-ui, sans-serif;
  --ae-font-semicondensed:'Open Sans SemiCondensed', 'Open Sans', system-ui, sans-serif;

  /* Scale — tuned for Montserrat's geometric metrics */
  --ae-text-xs:    11px;
  --ae-text-sm:    13px;
  --ae-text-base:  15px;
  --ae-text-md:    17px;
  --ae-text-lg:    20px;
  --ae-text-xl:    24px;
  --ae-text-2xl:   32px;
  --ae-text-3xl:   44px;
  --ae-text-4xl:   60px;
  --ae-text-5xl:   80px;
  --ae-text-6xl:   112px;

  /* Weights */
  --ae-w-light:    300;
  --ae-w-regular:  400;
  --ae-w-medium:   500;
  --ae-w-semibold: 600;
  --ae-w-bold:     700;

  /* Tracking */
  --ae-track-display: -0.035em;
  --ae-track-headline:-0.02em;
  --ae-track-body:    -0.005em;
  --ae-track-eyebrow: 0.22em;
  --ae-track-mono:    0.04em;

  /* Leading */
  --ae-lead-tight:  1.05;
  --ae-lead-snug:   1.2;
  --ae-lead-body:   1.65;
  --ae-lead-loose:  1.85;

  /* ── SPACE / RADIUS / SHADOW ──────────────────────────────────────── */
  --ae-space-1:  4px;
  --ae-space-2:  8px;
  --ae-space-3:  12px;
  --ae-space-4:  16px;
  --ae-space-5:  24px;
  --ae-space-6:  32px;
  --ae-space-7:  48px;
  --ae-space-8:  64px;
  --ae-space-9:  96px;

  /* Radii — restrained. Quant brand favors squared corners; small radii only on interactive chrome. */
  --ae-radius-none: 0;
  --ae-radius-xs:   2px;
  --ae-radius-sm:   4px;
  --ae-radius-md:   8px;
  --ae-radius-lg:   12px;
  --ae-radius-pill: 999px;

  /* Shadows — minimal. Brand prefers borders + flat surfaces over elevation. */
  --ae-shadow-xs: 0 1px 0 rgba(17,17,68,0.04);
  --ae-shadow-sm: 0 1px 2px rgba(17,17,68,0.06), 0 0 0 1px rgba(17,17,68,0.04);
  --ae-shadow-md: 0 8px 24px -8px rgba(17,17,68,0.18), 0 0 0 1px rgba(17,17,68,0.04);
  --ae-shadow-lg: 0 24px 48px -16px rgba(17,17,68,0.28), 0 0 0 1px rgba(17,17,68,0.06);
  --ae-shadow-amber: 0 8px 24px -8px rgba(249,133,19,0.45);

  /* Motion */
  --ae-ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* primary easing — measured, decisive */
  --ae-ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --ae-dur-fast:  120ms;
  --ae-dur-base:  200ms;
  --ae-dur-slow:  360ms;
}

/* ========================================================================
   SEMANTIC TYPE ROLES
   ======================================================================== */

.ae-eyebrow {
  font-family: var(--ae-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ae-track-eyebrow);
  text-transform: uppercase;
  color: var(--ae-habanero);
}

.ae-display {
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-5xl);
  font-weight: var(--ae-w-bold);
  letter-spacing: var(--ae-track-display);
  line-height: var(--ae-lead-tight);
  color: var(--ae-fg);
}
.ae-display em {
  font-style: normal;
  font-weight: var(--ae-w-light);
  background: var(--ae-grad-delta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ae-h1 {
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-4xl);
  font-weight: var(--ae-w-semibold);
  letter-spacing: var(--ae-track-headline);
  line-height: var(--ae-lead-tight);
  color: var(--ae-fg);
}

.ae-h2 {
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-3xl);
  font-weight: var(--ae-w-semibold);
  letter-spacing: var(--ae-track-headline);
  line-height: 1.1;
  color: var(--ae-fg);
}

.ae-h3 {
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-2xl);
  font-weight: var(--ae-w-semibold);
  letter-spacing: var(--ae-track-headline);
  line-height: 1.2;
  color: var(--ae-fg);
}

.ae-h4 {
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-xl);
  font-weight: var(--ae-w-medium);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ae-fg);
}

.ae-body {
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-base);
  font-weight: var(--ae-w-regular);
  letter-spacing: var(--ae-track-body);
  line-height: var(--ae-lead-body);
  color: var(--ae-fg-muted);
}

.ae-body-light {
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-md);
  font-weight: var(--ae-w-light);
  line-height: var(--ae-lead-loose);
  color: var(--ae-fg-muted);
}

.ae-small {
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-sm);
  font-weight: var(--ae-w-regular);
  line-height: 1.5;
  color: var(--ae-fg-muted);
}

.ae-mono {
  font-family: var(--ae-font-mono);
  font-size: var(--ae-text-sm);
  font-weight: var(--ae-w-regular);
  letter-spacing: var(--ae-track-mono);
  color: var(--ae-fg-muted);
}

.ae-mono-label {
  font-family: var(--ae-font-mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ae-fg-subtle);
}

.ae-data {
  font-family: var(--ae-font-sans);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: var(--ae-w-semibold);
  letter-spacing: -0.02em;
}

/* ========================================================================
   BASE / RESET
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ae-bg);
  color: var(--ae-fg);
  font-family: var(--ae-font-sans);
  font-size: var(--ae-text-base);
  line-height: var(--ae-lead-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}