/* ============================================================
   NOVEM DESIGN SYSTEM — colors_and_type.css
   The single source of truth for color and typography tokens.

   Type system has TWO faces:
   - DISPLAY (geometric sans, "Outfit"): marketing site only.
   - WORKING (serif "Newsreader" + sans "Inter Tight"):
     used inside admin panel, mobile app, kiosk, docs —
     anywhere real work happens. The serif gives Novem
     its editorial, human warmth that distinguishes it
     from typical enterprise HR tools.
   ============================================================ */

/* --- 1. WEBFONT IMPORTS ------------------------------------ */
/* Substituted from Google Fonts. Replace with licensed metric
   matches (e.g. GT America, Söhne, Tiempos) when ready.
   FLAGGED in README. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --- 2. COLOR PRIMITIVES ---------------------------------
     Warm emerald with cream/oat neutrals. Not the typical
     corporate slate. Picked to feel friendly, "real", outdoor. */

  /* Emerald scale — primary brand */
  --emerald-50:  #ecfaf2;
  --emerald-100: #d2f3df;
  --emerald-200: #a6e6c0;
  --emerald-300: #6dd29c;
  --emerald-400: #35b878;
  --emerald-500: #1a9d5f;   /* Primary */
  --emerald-600: #117e4d;
  --emerald-700: #0e6440;
  --emerald-800: #0d5034;
  --emerald-900: #0b3d29;
  --emerald-950: #062518;

  /* Oat / warm neutrals — backgrounds + text */
  --oat-50:  #faf7f2;       /* Warm app background */
  --oat-100: #f3ede2;       /* Hover surface */
  --oat-200: #e7dcc8;       /* Subtle dividers */
  --oat-300: #cdbfa6;
  --oat-400: #a89880;
  --oat-500: #7e7060;
  --oat-600: #5c5142;
  --oat-700: #423a30;
  --oat-800: #2b2620;
  --oat-900: #1a1612;
  --oat-950: #0d0b08;

  /* Pure stops */
  --white: #ffffff;
  --black: #0a0908;

  /* Accent — apricot. Used SPARINGLY for warnings,
     highlight pills, and the occasional editorial pop. */
  --apricot-100: #fde8d4;
  --apricot-300: #f6b87a;
  --apricot-500: #e88936;
  --apricot-700: #b3621e;

  /* Semantic — rooted in the same warm world */
  --success-bg:    #d2f3df;
  --success-fg:    #0e6440;
  --warning-bg:    #fde8d4;
  --warning-fg:    #b3621e;
  --danger-bg:     #fbe1dc;
  --danger-fg:     #a83829;
  --info-bg:       #e0e9f5;
  --info-fg:       #2a4a78;

  /* --- 3. SEMANTIC COLOR TOKENS ----------------------------
     Reference these in components, NOT primitives. */

  /* Foreground */
  --fg-1: var(--oat-900);   /* Primary text */
  --fg-2: var(--oat-700);   /* Secondary text */
  --fg-3: var(--oat-500);   /* Tertiary / metadata */
  --fg-4: var(--oat-400);   /* Disabled / placeholder */
  --fg-on-brand: var(--white);
  --fg-link: var(--emerald-700);

  /* Background */
  --bg-app:      var(--oat-50);    /* App canvas — warm cream */
  --bg-surface:  var(--white);     /* Cards, panels */
  --bg-sunken:   var(--oat-100);   /* Inset / wells */
  --bg-hover:    var(--oat-100);
  --bg-press:    var(--oat-200);
  --bg-brand:    var(--emerald-500);
  --bg-brand-hover: var(--emerald-600);
  --bg-brand-soft: var(--emerald-50);

  /* Borders */
  --border-1: rgba(66, 58, 48, 0.10);   /* Hairline */
  --border-2: rgba(66, 58, 48, 0.16);   /* Standard */
  --border-3: rgba(66, 58, 48, 0.24);   /* Strong / focused */
  --border-brand: var(--emerald-500);

  /* --- 4. TYPOGRAPHY FAMILIES ------------------------------ */
  --font-display: 'Outfit', 'Inter Tight', system-ui, sans-serif;        /* Marketing site only */
  --font-serif:   'Newsreader', 'Iowan Old Style', Georgia, serif;       /* Working surfaces (editorial) */
  --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* UI labels, body when serif feels too soft */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- 5. TYPE SCALE — DISPLAY (marketing) -----------------
     Generous, geometric, headline-first. */
  --display-1-size: 88px;  --display-1-lh: 0.96; --display-1-tracking: -0.035em; --display-1-weight: 600;
  --display-2-size: 64px;  --display-2-lh: 1.02; --display-2-tracking: -0.03em;  --display-2-weight: 600;
  --display-3-size: 44px;  --display-3-lh: 1.08; --display-3-tracking: -0.025em; --display-3-weight: 600;

  /* --- 6. TYPE SCALE — WORKING (serif editorial) ----------- */
  --h1-size: 36px;  --h1-lh: 1.15; --h1-tracking: -0.015em; --h1-weight: 400;
  --h2-size: 28px;  --h2-lh: 1.2;  --h2-tracking: -0.012em; --h2-weight: 400;
  --h3-size: 22px;  --h3-lh: 1.25; --h3-tracking: -0.008em; --h3-weight: 500;
  --h4-size: 18px;  --h4-lh: 1.3;  --h4-tracking: -0.005em; --h4-weight: 500;

  /* Body — serif by default in working surfaces */
  --body-lg-size: 19px; --body-lg-lh: 1.55;
  --body-md-size: 16px; --body-md-lh: 1.55;
  --body-sm-size: 14px; --body-sm-lh: 1.5;

  /* UI / labels — sans, because labels read better in sans at small sizes */
  --label-size: 13px;   --label-lh: 1.3;  --label-tracking: 0.005em; --label-weight: 500;
  --caption-size: 12px; --caption-lh: 1.35; --caption-tracking: 0.01em;

  /* Mono (codes, IDs, employee numbers) */
  --mono-size: 13px; --mono-lh: 1.45;

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

  /* --- 8. SHADOW SYSTEM ------------------------------------
     Soft, warm, low-contrast — never gray/blue dropshadows. */
  --shadow-xs: 0 1px 2px rgba(66, 58, 48, 0.05);
  --shadow-sm: 0 1px 2px rgba(66, 58, 48, 0.06), 0 2px 4px rgba(66, 58, 48, 0.04);
  --shadow-md: 0 2px 4px rgba(66, 58, 48, 0.06), 0 6px 12px rgba(66, 58, 48, 0.06);
  --shadow-lg: 0 4px 8px rgba(66, 58, 48, 0.06), 0 12px 28px rgba(66, 58, 48, 0.10);
  --shadow-xl: 0 8px 16px rgba(66, 58, 48, 0.08), 0 24px 48px rgba(66, 58, 48, 0.14);
  --shadow-inset: inset 0 1px 2px rgba(66, 58, 48, 0.06);

  /* --- 9. SPACING SCALE (4px base) ------------------------- */
  --space-0: 0;
  --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;

  /* --- 10. MOTION ------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized: cubic-bezier(0.3, 0.0, 0.0, 1.2);
  --ease-decel: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply to documents that opt-in. Do not auto-apply globally.
   ============================================================ */

.novem-display-1 { font-family: var(--font-display); font-size: var(--display-1-size); line-height: var(--display-1-lh); letter-spacing: var(--display-1-tracking); font-weight: var(--display-1-weight); color: var(--fg-1); }
.novem-display-2 { font-family: var(--font-display); font-size: var(--display-2-size); line-height: var(--display-2-lh); letter-spacing: var(--display-2-tracking); font-weight: var(--display-2-weight); color: var(--fg-1); }
.novem-display-3 { font-family: var(--font-display); font-size: var(--display-3-size); line-height: var(--display-3-lh); letter-spacing: var(--display-3-tracking); font-weight: var(--display-3-weight); color: var(--fg-1); }

.novem-h1 { font-family: var(--font-serif); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); font-weight: var(--h1-weight); color: var(--fg-1); }
.novem-h2 { font-family: var(--font-serif); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); font-weight: var(--h2-weight); color: var(--fg-1); }
.novem-h3 { font-family: var(--font-serif); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking); font-weight: var(--h3-weight); color: var(--fg-1); }
.novem-h4 { font-family: var(--font-serif); font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking); font-weight: var(--h4-weight); color: var(--fg-1); }

.novem-body-lg { font-family: var(--font-serif); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--fg-2); }
.novem-body    { font-family: var(--font-serif); font-size: var(--body-md-size); line-height: var(--body-md-lh); color: var(--fg-2); }
.novem-body-sm { font-family: var(--font-serif); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--fg-2); }

.novem-label   { font-family: var(--font-sans); font-size: var(--label-size); line-height: var(--label-lh); letter-spacing: var(--label-tracking); font-weight: var(--label-weight); color: var(--fg-1); }
.novem-caption { font-family: var(--font-sans); font-size: var(--caption-size); line-height: var(--caption-lh); letter-spacing: var(--caption-tracking); color: var(--fg-3); }
.novem-mono    { font-family: var(--font-mono); font-size: var(--mono-size); line-height: var(--mono-lh); color: var(--fg-2); }

/* Editorial italic for emphasis — a Novem signature */
.novem-em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }