/* ============================================================
   PROAGE+ Enterprise — Brand tokens
   Built on the Woot It structural foundation (Quicksand type,
   8px spacing, rounded surfaces, soft shadows) but recolored to
   the PROAGE+ intergenerational palette:
   deep blue · turquoise · coral · cream.
   ============================================================ */

@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Quicksand-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- PROAGE+ brand anchors (modern · joyful) -------------- */
  --proage-blue:   #3A4ED1;   /* vivid indigo-blue — confident, modern */
  --proage-teal:   #10C39A;   /* fresh mint — growth, vitality */
  --proage-coral:  #FF7E63;   /* bright coral — humanity, energy */
  --proage-yellow: #FFC02E;   /* sunshine — optimism, joy */
  --proage-violet: #8A6BF0;   /* soft violet — playful highlight */
  --proage-cream:  #FFF1E8;   /* light peach — warmth */
  --proage-sand:   #F8F9FF;   /* airy off-white — page brightness */

  /* ---------- Primary scale (vivid indigo-blue) -------------------- */
  --primary-50:  #EEF1FE;
  --primary-100: #DCE2FD;
  --primary-200: #BAC6FB;
  --primary-300: #8E9FF6;
  --primary-400: #6B7FF0;
  --primary-500: #4C61E8;
  --primary-600: #3A4ED1;     /* brand anchor */
  --primary-700: #2E3DAB;
  --primary-800: #283596;     /* deep section base */
  --primary-900: #1B2466;

  /* ---------- Teal scale (mint / growth) --------------------------- */
  --teal-50:  #E1FBF4;
  --teal-100: #B8F5E5;
  --teal-200: #80ECD1;
  --teal-300: #46E0BB;
  --teal-400: #1FD3A9;
  --teal-500: #10C39A;        /* anchor */
  --teal-600: #0BA383;
  --teal-700: #0A7E68;

  /* ---------- Coral scale (accent / human) ------------------------- */
  --coral-50:  #FFF1ED;
  --coral-100: #FFDED4;
  --coral-200: #FFBDA9;
  --coral-300: #FF9C82;
  --coral-400: #FF7E63;       /* anchor */
  --coral-500: #F5603F;
  --coral-600: #DC4A2C;

  /* ---------- Yellow scale (sunshine accent) ----------------------- */
  --yellow-50:  #FFF7DD;
  --yellow-100: #FFECB0;
  --yellow-300: #FFD45E;
  --yellow-400: #FFC02E;      /* anchor */
  --yellow-500: #F5A800;

  /* ---------- Cream / soft tint scale ------------------------------ */
  --cream-50:  #FFF9F0;
  --cream-100: #FFF2F4;       /* heroC soft wash */
  --cream-200: #FFE6DC;
  --cream-300: #FFD7C7;

  /* ---------- Neutrals (cool slate ramp) --------------------------- */
  --grey-50:  #F8F9FC;
  --grey-100: #EEF1F7;
  --grey-200: #E3E7F0;       /* dividers */
  --grey-300: #CFD6E4;
  --grey-400: #A6AFC4;
  --grey-500: #7B8499;
  --grey-600: #565F75;
  --grey-700: #383F54;
  --grey-800: #232838;
  --grey-900: #14182A;

  /* ---------- Semantic state colors -------------------------------- */
  --success:        #10C39A;
  --success-light:  #D6F7EE;
  --success-dark:   #0A7E68;

  --warning:        #FFB02E;
  --warning-light:  #FFEFC8;
  --warning-dark:   #D98A00;

  --error:          #F0556B;
  --error-light:    #FDDFE4;
  --error-dark:     #C73850;

  --info:           #4C61E8;
  --info-light:     #DEE3FD;
  --info-dark:      #3A4ED1;

  /* ---------- Surfaces & text -------------------------------------- */
  --bg-app:        #F8F9FF;   /* airy cool-white page */
  --bg-surface:    #FFFFFF;
  --bg-subtle:     #EFF1FD;   /* light indigo tint */
  --bg-hover:      #F3F5FF;
  --bg-deep:       #232E78;   /* rich indigo section background */
  --bg-disabled:   rgba(56, 63, 84, 0.12);

  --fg-1:          #14182A;   /* primary text */
  --fg-2:          #383F54;   /* secondary text */
  --fg-3:          #565F75;   /* muted text */
  --fg-4:          #7B8499;   /* placeholder, captions */
  --fg-on-primary: #FFFFFF;
  --fg-on-deep:    #E7EAFB;

  --border:        #E8E4F2;   /* soft divider */
  --border-cool:   #E3E7F0;   /* cool divider on white */
  --border-strong: #CFD6E4;
  --ring:          rgba(76, 97, 232, 0.35); /* indigo focus ring */

  /* ---------- Typography ------------------------------------------- */
  --font-sans: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Display + type scale (landing uses larger display sizes) */
  --text-display: 4.25rem;   /* 68px hero */
  --text-h1: 3rem;           /* 48px */
  --text-h2: 2.25rem;        /* 36px */
  --text-h3: 1.75rem;        /* 28px */
  --text-h4: 1.375rem;       /* 22px */
  --text-h5: 1.125rem;       /* 18px */
  --text-h6: 1rem;           /* 16px */
  --text-lead: 1.3125rem;    /* 21px lead paragraph */
  --text-body:  1rem;        /* 16px (landing body is larger than app's 14) */
  --text-small: 0.875rem;    /* 14px */
  --text-tiny:  0.75rem;     /* 12px */
  --text-micro: 0.6875rem;   /* 11px eyebrow */

  --line-tight:  1.1;
  --line-snug:   1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.65;

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

  /* ---------- Radii ------------------------------------------------ */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-pill: 999px;

  /* ---------- Shadows ---------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(40, 53, 150, 0.05);
  --shadow-sm:  0 1px 3px rgba(40, 53, 150, 0.08), 0 1px 2px rgba(40,53,150,0.04);
  --shadow-md:  0 4px 12px rgba(40, 53, 150, 0.10);
  --shadow-lg:  0 12px 28px rgba(40, 53, 150, 0.12);
  --shadow-xl:  0 24px 48px rgba(40, 53, 150, 0.16);
  --shadow-teal: 0 10px 24px rgba(16, 195, 154, 0.30);
  --shadow-coral: 0 10px 24px rgba(255, 126, 99, 0.32);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 420ms;
}

/* Fix malformed token if referenced */
:root { --coral-600: #DC4A2C; }

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-normal);
  color: var(--fg-1);
  background: var(--bg-app);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: var(--weight-bold); color: var(--fg-1); letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--primary-600); text-decoration: none; }
button { font-family: var(--font-sans); cursor: pointer; }
::selection { background: rgba(76, 97, 232, 0.20); }

/* Eyebrow / kicker */
.eyebrow {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-600);
}