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

:root {
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif !important;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", "Iowan Old Style", serif !important;
}

.dgauge { position: relative !important; }
.dgauge-center { position: absolute !important; left: 0 !important; right: 0 !important; text-align: center !important; z-index: 2; pointer-events: none; }
.dgauge-score { font-family: var(--font-sans) !important; font-weight: 800; line-height: .92; }
.dgauge-band { font-family: var(--font-sans) !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* =========================================================================
   DULIUS DESIGN SYSTEM — Colors & Type
   The Alternative Lending Engine · "Smarter credit. Better funding."
   -------------------------------------------------------------------------
   Premium green fintech. Forest + spring green, gauge motif.
   Type v2: Georgia (bold italic) headlines + Helvetica Neue body — echoes the
   italic serif logo. Both are system fonts, so no webfont import is needed.
   Import this file, then use the semantic vars (--fg1, --primary, --h1…).
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. BRAND GREENS  (logo: dark #1B5C2E → light #2DBD6E gradient)
     --------------------------------------------------------------------- */
  --green-950: #0A2114;
  --green-900: #0E2A18;
  --green-800: #133D20;
  --green-700: #1B5C2E;   /* ★ BRAND DARK — primary */
  --green-600: #21813F;
  --green-500: #2DBD6E;   /* ★ BRAND LIGHT — accent / CTA */
  --green-400: #4FD389;
  --green-300: #84E3AE;
  --green-200: #BCEFD3;
  --green-100: #E2F8EC;
  --green-50:  #F1FCF6;
  --green-tint: #F0FAF4;  /* accent light-green tint (spec) */

  /* ---------------------------------------------------------------------
     2. NEUTRALS  (cool slate with a faint green undertone)
     --------------------------------------------------------------------- */
  --ink-900: #111111;   /* near-black text (spec) */
  --ink-800: #16221C;
  --ink-700: #2A3830;
  --ink-600: #555555;   /* secondary text (spec) */
  --ink-500: #888888;   /* tertiary / muted (spec) */
  --ink-400: #97A39B;   /* placeholder, disabled */
  --ink-300: #C3CCC7;   /* strong border */
  --ink-200: #E8F0E8;   /* default border / hairline (spec) */
  --ink-150: #E9EDEA;
  --ink-100: #EFF2F0;   /* subtle fill */
  --ink-50:  #F8FAF8;   /* page background (spec surface gray) */
  --white:   #FFFFFF;

  /* ---------------------------------------------------------------------
     3. SEMANTIC STATUS
     --------------------------------------------------------------------- */
  --success:     #21813F;
  --success-bg:  #E2F8EC;
  --warning:     #C98A12;
  --warning-bg:  #FBF1D9;
  --danger:      #D6453F;
  --danger-bg:   #FBE6E5;
  --info:        #2E72C9;
  --info-bg:     #E4EEFB;

  /* ---------------------------------------------------------------------
     4. DULIUS SCORE RAMP  (300–850 gauge — 6 segments, v2 spec)
     --------------------------------------------------------------------- */
  --score-red:        #E05C5C;  /* 300–449 */
  --score-orange:     #F5A623;  /* 450–549 */
  --score-yellow:     #F5D623;  /* 550–599 */
  --score-lightgreen: #7BC67E;  /* 600–699 */
  --score-green:      #2DBD6E;  /* 700–749 */
  --score-darkgreen:  #1B5C2E;  /* 750–850 */
  --score-track:    #E8F0E8;  /* unfilled gauge arc */

  /* ---------------------------------------------------------------------
     5. SEMANTIC ALIASES
     --------------------------------------------------------------------- */
  --fg1: var(--ink-900);        /* headings, primary text */
  --fg2: var(--ink-600);        /* body, secondary */
  --fg3: var(--ink-500);        /* muted, captions */
  --fg-inverse: var(--white);
  --fg-brand: var(--green-700);

  --bg1: var(--white);          /* cards, surfaces */
  --bg2: var(--ink-50);         /* page */
  --bg3: var(--ink-100);        /* sunken / subtle fill */
  --bg-brand: var(--green-700);
  --bg-brand-soft: var(--green-50);

  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand: var(--green-200);

  --primary: var(--green-700);
  --primary-hover: var(--green-800);
  --primary-press: var(--green-900);
  --accent: var(--green-500);
  --accent-hover: var(--green-600);

  /* Signature brand gradient (mirrors the logo wordmark) */
  --grad-brand: linear-gradient(100deg, #1B5C2E 0%, #21813F 48%, #2DBD6E 100%);
  --grad-brand-soft: linear-gradient(135deg, #F1FCF6 0%, #E2F8EC 100%);
  --grad-hero: radial-gradient(120% 130% at 85% 0%, #21813F 0%, #1B5C2E 55%, #0E2A18 100%);

  /* ---------------------------------------------------------------------
     6. TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Georgia, 'Times New Roman', 'Iowan Old Style', serif; /* headlines, bold italic */
  /* numeric: tabular lining figures for scores, money, tables */
  --num-feat: "tnum" 1, "lnum" 1;

  /* Font sizes (px) */
  --text-display-2xl: 64px;
  --text-display-xl:  52px;
  --text-display-lg:  40px;
  --text-h1: 32px;
  --text-h2: 26px;
  --text-h3: 21px;
  --text-h4: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-overline: 12px;

  /* Weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* ---------------------------------------------------------------------
     7. SPACING (4px 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;

  /* ---------------------------------------------------------------------
     8. RADII
     --------------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;   /* buttons, inputs */
  --radius-lg: 18px;   /* cards */
  --radius-xl: 24px;   /* large panels */
  --radius-2xl: 32px;  /* hero surfaces */
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     9. ELEVATION  (soft, green-tinted)
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(14, 42, 24, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 42, 24, 0.06), 0 1px 2px rgba(14, 42, 24, 0.04);
  --shadow-md: 0 6px 18px rgba(14, 42, 24, 0.08), 0 2px 6px rgba(14, 42, 24, 0.05);
  --shadow-lg: 0 16px 40px rgba(14, 42, 24, 0.12), 0 4px 12px rgba(14, 42, 24, 0.06);
  --shadow-xl: 0 28px 70px rgba(14, 42, 24, 0.16), 0 8px 20px rgba(14, 42, 24, 0.08);
  --shadow-brand: 0 10px 30px rgba(27, 92, 46, 0.28);
  --shadow-accent: 0 8px 24px rgba(45, 189, 110, 0.32);
  --ring-focus: 0 0 0 3px rgba(45, 189, 110, 0.35);

  /* ---------------------------------------------------------------------
     10. MOTION
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 920px;
}

/* =========================================================================
   SEMANTIC TYPE CLASSES — apply directly or copy into element rules
   ========================================================================= */
.ds-display-2xl { font: italic var(--w-bold) var(--text-display-2xl)/1.04 var(--font-serif); letter-spacing: -0.02em; color: var(--fg1); }
.ds-display-xl  { font: italic var(--w-bold) var(--text-display-xl)/1.06 var(--font-serif);  letter-spacing: -0.02em; color: var(--fg1); }
.ds-display-lg  { font: italic var(--w-bold) var(--text-display-lg)/1.1 var(--font-serif);  letter-spacing: -0.015em; color: var(--fg1); }
.ds-h1 { font: var(--w-bold) var(--text-h1)/1.18 var(--font-serif); letter-spacing: -0.01em; color: var(--fg1); }
.ds-h2 { font: var(--w-bold) var(--text-h2)/1.22 var(--font-serif);  letter-spacing: -0.01em; color: var(--fg1); }
.ds-h3 { font: var(--w-bold) var(--text-h3)/1.3 var(--font-serif); color: var(--fg1); }
.ds-h4 { font: var(--w-semibold) var(--text-h4)/1.35 var(--font-sans); letter-spacing: -0.01em; color: var(--fg1); }
.ds-body-lg { font: var(--w-regular) var(--text-body-lg)/1.6 var(--font-sans); color: var(--fg2); }
.ds-body    { font: var(--w-regular) var(--text-body)/1.6 var(--font-sans); color: var(--fg2); }
.ds-body-sm { font: var(--w-regular) var(--text-body-sm)/1.5 var(--font-sans); color: var(--fg2); }
.ds-caption { font: var(--w-medium) var(--text-caption)/1.4 var(--font-sans); color: var(--fg3); }
.ds-overline { font: var(--w-bold) var(--text-overline)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg3); }
.ds-num { font-family: var(--font-sans); font-feature-settings: var(--num-feat); font-variant-numeric: tabular-nums lining-nums; }