/* =====================================================================
 * KRS Design System — Colors & Typography
 * Key Retirement Solutions (krs.insure)
 *
 * Loaded globally on all MIC portal pages.
 * Poppins and Playfair Display served from Google Fonts.
 * ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&display=swap");

:root {
  /* ---------------------------------------------------------------
   * COLOR — BRAND
   * --------------------------------------------------------------- */
  --krs-navy-900: #0A1340;
  --krs-navy-800: #0E1A47;
  --krs-navy-700: #1A2356;
  --krs-navy-600: #2A2F5A;
  --krs-navy-500: #3F4570;

  --krs-gold-700: #A07B23;
  --krs-gold-600: #BE9A30;
  --krs-gold-500: #C39935;
  --krs-gold-400: #D9B45A;
  --krs-gold-300: #E5C77B;
  --krs-gold-100: #F3E3B5;

  --krs-lavender-50:  #F4F2FB;
  --krs-lavender-100: #ECE8F6;
  --krs-lavender-200: #D6CFEC;
  --krs-lavender-300: #B8AEDB;
  --krs-lavender-600: #6E5FAE;

  /* ---------------------------------------------------------------
   * COLOR — NEUTRALS
   * --------------------------------------------------------------- */
  --krs-white:    #FFFFFF;
  --krs-paper:    #FBFAFD;
  --krs-gray-50:  #F5F5F8;
  --krs-gray-100: #ECEDF2;
  --krs-gray-200: #DCDEE6;
  --krs-gray-300: #C2C5D2;
  --krs-gray-400: #9CA0B2;
  --krs-gray-500: #767A8E;
  --krs-gray-600: #5F6478;
  --krs-gray-700: #3F4357;
  --krs-gray-800: #262A3B;
  --krs-gray-900: #14172A;

  /* ---------------------------------------------------------------
   * COLOR — SEMANTIC
   * --------------------------------------------------------------- */
  --krs-success:    #2F8F5A;
  --krs-success-bg: #E5F3EB;
  --krs-warning:    #C9881F;
  --krs-warning-bg: #FBF1DC;
  --krs-danger:     #B23C3C;
  --krs-danger-bg:  #FBE7E7;
  --krs-info:       #2F62A8;
  --krs-info-bg:    #E4ECF7;
  --krs-rating:     #E1A82C;

  /* ---------------------------------------------------------------
   * COLOR — ROLES
   * --------------------------------------------------------------- */
  --bg-page:       var(--krs-paper);
  --bg-surface:    var(--krs-white);
  --bg-elevated:   var(--krs-white);
  --bg-quiet:      var(--krs-lavender-50);
  --bg-inverse:    var(--krs-navy-800);

  --fg-default:    var(--krs-navy-900);
  --fg-muted:      var(--krs-gray-600);
  --fg-subtle:     var(--krs-gray-500);
  --fg-on-inverse: var(--krs-white);
  --fg-on-gold:    var(--krs-navy-900);

  --border-default: var(--krs-gray-200);
  --border-strong:  var(--krs-gray-300);
  --border-quiet:   var(--krs-lavender-200);

  --accent:       var(--krs-gold-500);
  --accent-hover: var(--krs-gold-400);
  --accent-press: var(--krs-gold-700);

  /* ---------------------------------------------------------------
   * TYPOGRAPHY — FAMILIES
   * --------------------------------------------------------------- */
  --font-sans:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------
   * TYPOGRAPHY — SCALE
   * --------------------------------------------------------------- */
  --fs-display-1: 64px;
  --fs-display-2: 48px;
  --fs-h1:        40px;
  --fs-h2:        32px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-h5:        17px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-micro:     11px;

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

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.14em;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 700;
  --fw-black:     700;

  /* ---------------------------------------------------------------
   * SPACING — 4px grid
   * --------------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------------
   * RADII
   * --------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
   * SHADOWS
   * --------------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(14, 26, 71, 0.06);
  --shadow-sm:   0 2px 6px rgba(14, 26, 71, 0.06), 0 1px 2px rgba(14, 26, 71, 0.04);
  --shadow-md:   0 6px 18px rgba(14, 26, 71, 0.08), 0 2px 4px rgba(14, 26, 71, 0.04);
  --shadow-lg:   0 18px 40px rgba(14, 26, 71, 0.12), 0 4px 10px rgba(14, 26, 71, 0.05);
  --shadow-gold: 0 6px 18px rgba(195, 153, 53, 0.35);
  --shadow-focus: 0 0 0 3px rgba(195, 153, 53, 0.35);

  /* ---------------------------------------------------------------
   * MOTION
   * --------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* ---------------------------------------------------------------
   * LAYOUT
   * --------------------------------------------------------------- */
  --container-max: 1320px;
  --container-pad: 32px;
  --topbar-h:      44px;
  --nav-h:         76px;
}