@charset "UTF-8";
/* UENI Design System: Colors & Type
 * Source: main-web-app-next/src/shared/theme/{colors.js,fonts.js,textStyles.js,global.js}
 * and main-web-app-next/src/@packages/hub_v2/src/theme/mui.ts
 */

/* ============================================================
 * Fonts (self-hosted, copied from src/static/fonts)
 * ============================================================ */

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Codebase calls this family "MontserratUENI", kept as an alias.
 * The 600/800/bold weights all resolve to Montserrat-Black in production,
 * which is why display type reads very heavy. */
@font-face {
  font-family: "MontserratUENI";
  src: url("./fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MontserratUENI";
  src: url("./fonts/Montserrat-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MontserratUENI";
  src: url("./fonts/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MontserratUENI";
  src: url("./fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MontserratUENI";
  src: url("./fonts/Montserrat-Black.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MontserratUENI";
  src: url("./fonts/Montserrat-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ============================================================
 * Design tokens
 * ============================================================ */

:root {
  /* -------- Font families -------- */
  --font-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "MontserratUENI", "Montserrat", -apple-system, sans-serif;

  /* -------- Brand colour -------- *
   * UENI's single brand accent is a warm orange ("secondary" in code).
   * Historical palettes (purple / blue / teal) also live in the codebase
   * but the current product surfaces the orange everywhere CTAs appear.
   */
  --brand-orange:         #FF4A00;    /* button-secondary / primary CTA */
  --brand-orange-hover:   #CE3D02;    /* button-secondary-hover (press/hover) */
  --brand-orange-soft:    #FF6900;    /* alt hover used in colors.js */
  --brand-connect:        #FF933A;    /* "connect" orange (inline links) */

  /* -------- Neutrals (the workhorses) -------- */
  --ink:                  #000000;
  --ink-1:                #333333;    /* body text / primary dark */
  --ink-2:                #454545;    /* "gray" */
  --ink-3:                #4A4A4A;    /* descText */
  --ink-placeholder:      #555555;
  --muted-1:              #666666;    /* menuGray */
  --muted-2:              #6C6C6C;    /* greyDarkest */
  --muted-3:              #727272;    /* fadedText */

  --grey-dark:            #999999;
  --grey-mid:             #ADADAD;    /* greyDarker */
  --grey:                 #C2C2C2;
  --grey-light:           #D6D6D6;
  --grey-lighter:         #EAEAEA;
  --grey-lightest:        #F5F5F5;    /* sticky bg, page tint */

  --line:                 #E4E4E4;    /* colorBorder */
  --line-soft:            #EEEEEE;
  --line-strong:          #C0C0C0;
  --input-border:         #C6C6C6;

  --surface:              #FFFFFF;
  --surface-faint:        #FCFCFC;    /* lightBackground */
  --surface-off:          #FAFAFA;    /* offWhite, main app bg */
  --surface-clear:        #FBFBFB;
  --surface-search:       #F9F9F9;
  --surface-beige:        #F5F0ED;    /* marketing warm tint */

  /* -------- Semantic -------- */
  --success:              #4BD762;    /* input valid */
  --success-soft:         #24C49E;    /* tertiary / teal */
  --success-switch:       #0FEDB8;    /* greenLight / switchOn */
  --error:                #FF1B1B;
  --error-2:              #FF3B2F;    /* input error */
  --warning:              #FFE5BF;    /* progress */
  --star:                 #FDC482;
  --info:                 #15B2F7;    /* background2 */

  /* -------- Legacy / marketing palette (seen in older pages) -------- */
  --purple:               #4600A5;
  --purple-light:         #EBE5F5;
  --purple-dark:          #24054F;
  --blue-dark:            #240A4E;    /* blueDarkest */
  --blue-deep:            #3D049B;    /* "blue" */
  --blue-link:            #1A0DAB;
  --blue-text:            #0D3973;
  --default-category:     #F71D61;    /* magenta category chip */

  /* -------- Shadows -------- *
   * The two signatures that recur: a very soft warm card-shadow
   * (tiles, section cards) and a tighter header drop-shadow (sticky nav).
   */
  --shadow-card:   0 3px 9px 0 rgba(227, 222, 214, 0.5);
  --shadow-nav-sm: 0 5px 12px 0 rgba(0, 0, 0, 0.16);
  --shadow-nav-md: 0 11px 14px 0 rgba(0, 0, 0, 0.09);
  --shadow-sticky: 0 2px 4px -1px rgba(0,0,0,.2),
                   0 4px 5px 0   rgba(0,0,0,.14),
                   0 1px 10px 0  rgba(0,0,0,.12);

  /* -------- Radii -------- */
  --radius-xs:  2px;
  --radius-sm:  4px;   /* inputs, small cards */
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 50px; /* hub_v2 primary CTA */
  --radius-full: 999em;

  /* -------- Spacing (space scale from theme.js: 0…10rem) -------- */
  --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 */

  /* -------- Breakpoints (hub_v2/theme/breakpoints.ts) -------- */
  --bp-xs:  576px;
  --bp-sm:  768px;
  --bp-md:  992px;
  --bp-lg:  1200px;
  --bp-xl:  1280px;
  --bp-xxl: 1440px;
}

/* ============================================================
 * Semantic base styles (apply with the tag or a utility class).
 *
 * Display (h1 to h5) uses MontserratUENI, very bold, tight letter-spacing
 * at large sizes.  Body uses Lato Light (300) for long-form copy,
 * Regular for UI labels.  Sizes follow textStyles.js.
 * ============================================================ */

html, body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-1);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, p { margin: 0; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  line-height: 54px;
  letter-spacing: -0.26px;
  color: var(--ink-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.04rem;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

p, .body {
  font-family: var(--font-body);
  font-weight: 300;          /* Lato Light, the long-form default */
  font-size: 18px;
  line-height: 26px;
}

.body-md {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.body-sm, small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}

/* Form / hub-v2 controls use Montserrat at tight sizes */
.label, .ui-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--input-border);         /* matches MUI form label default */
  letter-spacing: 0.01rem;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-orange);
}

code, .mono {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.link {
  color: var(--brand-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.link:hover { color: var(--brand-orange-hover); }

@media (max-width: 768px) {
  h1, .h1 { font-size: 32px; line-height: 40px; }
  h2, .h2 { font-size: 24px; line-height: 32px; }
  h3, .h3 { font-size: 20px; line-height: 28px; }
  h4, .h4 { font-size: 16px; line-height: 24px; }
  p, .body { font-size: 16px; line-height: 24px; }
  .body-md { font-size: 12px; line-height: 20px; }
}