/* =========================================================================
   CEG — Commercial Equities Group
   Colors & Type — core tokens + semantic type styles
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Poppins — CEG brand face (self-hosted from /fonts/) --- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Poppins-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }

:root {
  /* ---------- BRAND CORE (per CEG marketing spec) -------------------------- */
  --ceg-navy:         #000030;   /* Dark Blue — RGB 0/0/48 — primary background */
  --ceg-cyan:         #00C9FF;   /* Light Blue — RGB 0/201/255 — primary accent */
  --ceg-teal:         #008CB2;   /* Teal — RGB 0/140/178 — secondary accent */

  /* ---------- NAVY SCALE (pure blue family — no red, never purple) -------- */
  --navy-950:         #00001C;   /* deepest — hero / full-bleed */
  --navy-900:         #000030;   /* brand core */
  --navy-800:         #061646;   /* cards on navy */
  --navy-700:         #0E2A60;   /* elevated surfaces on navy */
  --navy-600:         #19427E;   /* borders on dark */
  --navy-500:         #2A609F;   /* muted accents on dark */

  /* ---------- CYAN SCALE (primary blue family) ----------------------------- */
  --cyan-50:          #E5FAFF;
  --cyan-100:         #C3F2FF;
  --cyan-200:         #8FE6FF;
  --cyan-300:         #54D7FF;
  --cyan-400:         #00C9FF;   /* brand cyan */
  --cyan-500:         #00AEDD;
  --cyan-600:         #008CB2;   /* brand teal */
  --cyan-700:         #006C8C;
  --cyan-800:         #004F68;
  --cyan-900:         #003547;

  /* ---------- NEUTRALS (warm-cool cool-leaning) ---------------------------- */
  --white:            #FFFFFF;
  --ink-50:           #F7F9FC;   /* page bg light */
  --ink-100:          #EEF2F8;   /* subtle fills */
  --ink-200:          #DDE4EF;   /* hairline borders */
  --ink-300:          #C2CCDC;
  --ink-400:          #8F9CB3;   /* disabled text */
  --ink-500:          #637087;   /* tertiary text */
  --ink-600:          #455268;   /* secondary text */
  --ink-700:          #2E394D;
  --ink-800:          #1B2334;
  --ink-900:          #0E1422;

  /* ---------- SEMANTIC ----------------------------------------------------- */
  --success:          #22A06B;
  --success-bg:       #E3F5EC;
  --warning:          #E3A008;
  --warning-bg:       #FFF5D9;
  --danger:           #D92D20;
  --danger-bg:        #FCE5E3;
  --info:             var(--cyan-500);
  --info-bg:          var(--cyan-50);

  /* ---------- FOREGROUND / BACKGROUND (light mode default) ----------------- */
  --bg-0:             var(--white);
  --bg-1:             var(--ink-50);
  --bg-2:             var(--ink-100);
  --bg-inverse:       var(--ceg-navy);

  --fg-1:             var(--ceg-navy);        /* primary text */
  --fg-2:             var(--ink-600);         /* secondary text */
  --fg-3:             var(--ink-500);         /* tertiary / meta */
  --fg-4:             var(--ink-400);         /* disabled / ghosted */
  --fg-on-dark:       var(--white);
  --fg-accent:        var(--cyan-600);        /* links on light */
  --fg-accent-on-dark:var(--cyan-400);        /* links on navy */

  --border-subtle:    var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-on-dark:   rgba(255,255,255,0.12);

  /* ---------- TYPE FAMILIES ----------------------------------------------- */
  /* Poppins = CEG brand face, used for both display and body (self-hosted) */
  /* JetBrains Mono = numerical / metrics / code */
  --font-display:     'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:        'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (rem-based; 16px root) --------------------------- */
  --fs-xs:            0.75rem;   /* 12 */
  --fs-sm:            0.875rem;  /* 14 */
  --fs-base:          1rem;      /* 16 */
  --fs-md:            1.125rem;  /* 18 */
  --fs-lg:            1.25rem;   /* 20 */
  --fs-xl:            1.5rem;    /* 24 */
  --fs-2xl:           1.875rem;  /* 30 */
  --fs-3xl:           2.25rem;   /* 36 */
  --fs-4xl:           3rem;      /* 48 */
  --fs-5xl:           3.75rem;   /* 60 */
  --fs-6xl:           4.75rem;   /* 76 */

  --lh-tight:         1.05;
  --lh-snug:          1.2;
  --lh-normal:        1.45;
  --lh-relaxed:       1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* ---------- SPACING (4pt grid) ----------------------------------------- */
  --space-0:          0;
  --space-1:          0.25rem;  /*  4 */
  --space-2:          0.5rem;   /*  8 */
  --space-3:          0.75rem;  /* 12 */
  --space-4:          1rem;     /* 16 */
  --space-5:          1.25rem;  /* 20 */
  --space-6:          1.5rem;   /* 24 */
  --space-8:          2rem;     /* 32 */
  --space-10:         2.5rem;   /* 40 */
  --space-12:         3rem;     /* 48 */
  --space-16:         4rem;     /* 64 */
  --space-20:         5rem;     /* 80 */
  --space-24:         6rem;     /* 96 */

  /* ---------- RADII ------------------------------------------------------ */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --radius-xl:        20px;
  --radius-2xl:       28px;
  --radius-pill:      999px;

  /* ---------- SHADOWS (cool-tinted, cast against navy) ------------------- */
  --shadow-xs:        0 1px 2px rgba(0,0,48,0.06);
  --shadow-sm:        0 2px 4px rgba(0,0,48,0.06), 0 1px 2px rgba(0,0,48,0.04);
  --shadow-md:        0 6px 16px -4px rgba(0,0,48,0.10), 0 2px 4px rgba(0,0,48,0.06);
  --shadow-lg:        0 16px 32px -8px rgba(0,0,48,0.16), 0 4px 8px rgba(0,0,48,0.06);
  --shadow-xl:        0 28px 56px -12px rgba(0,0,48,0.22);
  --shadow-cyan:      0 8px 24px -6px rgba(0,201,255,0.45);   /* glow CTA */
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.08);     /* sheen on dark surfaces */

  /* ---------- MOTION ----------------------------------------------------- */
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance:    cubic-bezier(0, 0, 0, 1);
  --ease-exit:        cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:         120ms;
  --dur-base:         200ms;
  --dur-slow:         320ms;
  --dur-slower:       520ms;

  /* ---------- LAYOUT ----------------------------------------------------- */
  --max-content:      1200px;
  --max-prose:        68ch;
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Use these as classes: .h1, .h2, .body, .eyebrow, .metric, etc.
   ========================================================================= */

.display-xl, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h5, h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--cyan-600);
}

.body-lg, .lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body-sm, small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 500;
}