/* ============================================================================
   UMP Design System — Colors & Type
   Um Mundo Possível · Human Risk Behavior Management
   ============================================================================ */

@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Thin.ttf') format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ThinItalic.ttf') format('truetype'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-BlackItalic.ttf') format('truetype'); font-weight:900; font-style:italic; font-display:swap; }
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ump-navy-950: #1A222B;
  --ump-navy-900: #2E3A47;
  --ump-navy-800: #3C4856;
  --ump-navy-700: #546170;
  --ump-navy-500: #7E8896;
  --ump-navy-300: #B9BFC8;
  --ump-navy-100: #E2E5E9;

  --ump-copper-900: #8E4A28;
  --ump-copper-700: #A85D38;
  --ump-copper-500: #C4714A;
  --ump-copper-400: #D58A66;
  --ump-copper-200: #EAC4AF;
  --ump-copper-100: #F3DBC9;

  --ump-cream-700: #E8DDCD;
  --ump-cream-500: #F5EDE3;
  --ump-cream-300: #FAF5EC;
  --ump-off-white: #FAF7F4;
  --ump-white: #FFFFFF;

  --ump-ok-700: #4A6B52;
  --ump-ok-500: #6B8B6F;
  --ump-warn-700: #B07E2E;
  --ump-warn-500: #C89A50;
  --ump-risk-700: #9B4A3A;
  --ump-risk-500: #B56251;

  --bg-page:        var(--ump-off-white);
  --bg-surface:     var(--ump-white);
  --bg-raised:      var(--ump-cream-300);
  --bg-sunken:      var(--ump-cream-500);
  --bg-inverse:     var(--ump-navy-900);
  --bg-accent-soft: var(--ump-copper-100);

  --fg-primary:     var(--ump-navy-900);
  --fg-secondary:   var(--ump-navy-700);
  --fg-muted:       var(--ump-navy-500);
  --fg-subtle:      var(--ump-navy-300);
  --fg-inverse:     var(--ump-cream-500);
  --fg-inverse-muted: var(--ump-navy-300);
  --fg-accent:      var(--ump-copper-700);

  --border-subtle:  rgba(46, 58, 71, 0.08);
  --border-default: rgba(46, 58, 71, 0.14);
  --border-strong:  rgba(46, 58, 71, 0.28);
  --border-accent:  var(--ump-copper-500);

  --accent:         var(--ump-copper-500);
  --accent-hover:   var(--ump-copper-700);
  --accent-press:   var(--ump-copper-900);

  --font-sans:   'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

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

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

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

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.08em;
  --ls-wider:   0.14em;

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px rgba(26,34,43,0.04);
  --shadow-sm: 0 1px 2px rgba(26,34,43,0.04), 0 2px 6px rgba(26,34,43,0.04);
  --shadow-md: 0 2px 4px rgba(26,34,43,0.05), 0 8px 20px rgba(26,34,43,0.06);
  --shadow-lg: 0 4px 10px rgba(26,34,43,0.06), 0 20px 40px rgba(26,34,43,0.08);

  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  --content-prose: 720px;
  --content-wide:  1120px;
  --content-full:  1360px;
}

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

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
button { font-family: var(--font-sans); }