/* ============================================================
   ClickLend — colors & type tokens
   Import this first. Everything else depends on these vars.
   ============================================================ */

/* The design system's Google Fonts import is replaced by fonts.css, which
   serves the same faces from this site — no third-party request. */

:root {
  /* -------- BRAND --------------------------------------------- */
  --brand-green:          #0B7A4B;   /* Postbank deep green — primary actions, brand */
  --brand-green-600:      #0A6D43;   /* hover  */
  --brand-green-700:      #085A37;   /* pressed */
  --brand-green-100:      #E4F1EA;   /* subtle bg */
  --brand-green-050:      #F0F7F3;   /* very subtle bg / selected row */

  --brand-blue:           #1E5FBF;   /* sky-blue accent, links, focus ring */
  --brand-blue-600:       #1A54A9;
  --brand-blue-700:       #164791;
  --brand-blue-100:       #E0EAF9;
  --brand-blue-050:       #EEF4FC;

  /* -------- NEUTRALS (slate) ---------------------------------- */
  --slate-900:            #0F1A24;   /* headings */
  --slate-800:            #1F2B38;
  --slate-700:            #334155;   /* body strong */
  --slate-600:            #475569;   /* body */
  --slate-500:            #64748B;   /* muted */
  --slate-400:            #94A3B8;   /* placeholder */
  --slate-300:            #CBD5E1;
  --slate-200:            #E3E8EF;   /* default border */
  --slate-150:            #EDF1F6;
  --slate-100:            #F1F5F9;   /* subtle divider bg */
  --slate-050:            #F7F9FC;   /* canvas */
  --white:                #FFFFFF;

  /* -------- SEMANTIC ------------------------------------------ */
  --success:              #0B7A4B;
  --success-100:          #E4F1EA;
  --warning:              #B77600;
  --warning-100:          #FCF1D9;
  --danger:               #B42318;
  --danger-100:           #FCE7E4;
  --info:                 #1E5FBF;
  --info-100:             #E0EAF9;

  /* -------- FG / BG SEMANTIC ROLES ---------------------------- */
  --bg-canvas:            var(--slate-050);
  --bg-surface:           var(--white);
  --bg-surface-raised:    var(--white);
  --bg-subtle:            var(--slate-100);
  --bg-hover:             #F7FAF8;           /* row hover (greenish) */
  --bg-selected:          var(--brand-green-050);

  --fg-default:           var(--slate-700);
  --fg-strong:            var(--slate-900);
  --fg-muted:             var(--slate-500);
  --fg-subtle:            var(--slate-400);
  --fg-on-brand:          var(--white);
  --fg-link:              var(--brand-blue);

  --border-default:       var(--slate-200);
  --border-hover:         #C9D3DE;
  --border-strong:        var(--slate-300);
  --border-focus:         var(--brand-blue);
  --border-danger:        var(--danger);

  /* -------- TYPE — families ----------------------------------- */
  --font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -------- TYPE — size scale (px) ---------------------------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;  /* default body */
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;

  /* -------- TYPE — weights ----------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* -------- TYPE — line heights ------------------------------- */
  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;

  /* -------- SPACING ------------------------------------------- */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* -------- RADII --------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;     /* buttons, inputs — DEFAULT */
  --radius-lg:   10px;    /* cards */
  --radius-xl:   12px;    /* modals, sheets */
  --radius-pill: 999px;

  /* -------- SHADOWS ------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(15,26,36,0.04);
  --shadow-sm:   0 1px 3px rgba(15,26,36,0.06), 0 1px 2px rgba(15,26,36,0.04);
  --shadow-md:   0 4px 12px rgba(15,26,36,0.08);
  --shadow-lg:   0 12px 32px rgba(15,26,36,0.12);
  --ring-focus:  0 0 0 2px #FFFFFF, 0 0 0 4px var(--brand-blue);

  /* -------- MOTION -------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    240ms;

  /* -------- LAYOUT -------------------------------------------- */
  --layout-sidebar:  240px;
  --layout-topbar:   56px;
  --layout-max:      1440px;
}

/* ============================================================
   Semantic text roles — apply directly as classes
   or use the custom properties in your own rules.
   ============================================================ */

.display-xl { font: var(--fw-semibold) var(--fs-40)/var(--lh-tight) var(--font-sans); letter-spacing: -0.02em; color: var(--fg-strong); }
.display-lg { font: var(--fw-semibold) var(--fs-32)/var(--lh-tight) var(--font-sans); letter-spacing: -0.015em; color: var(--fg-strong); }

.h1 { font: var(--fw-semibold) var(--fs-28)/var(--lh-snug) var(--font-sans); letter-spacing: -0.01em; color: var(--fg-strong); }
.h2 { font: var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-sans); letter-spacing: -0.005em; color: var(--fg-strong); }
.h3 { font: var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-sans); color: var(--fg-strong); }
.h4 { font: var(--fw-semibold) var(--fs-16)/var(--lh-snug) var(--font-sans); color: var(--fg-strong); }
.h5 { font: var(--fw-semibold) var(--fs-14)/var(--lh-snug) var(--font-sans); color: var(--fg-strong); }

.body-lg    { font: var(--fw-regular) var(--fs-16)/var(--lh-normal) var(--font-sans); color: var(--fg-default); }
.body       { font: var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-sans); color: var(--fg-default); }
.body-sm    { font: var(--fw-regular) var(--fs-13)/var(--lh-normal) var(--font-sans); color: var(--fg-default); }
.caption    { font: var(--fw-regular) var(--fs-12)/var(--lh-normal) var(--font-sans); color: var(--fg-muted); }

.label      { font: var(--fw-medium) var(--fs-13)/var(--lh-snug) var(--font-sans); color: var(--fg-strong); }
.label-sm   { font: var(--fw-medium) var(--fs-12)/var(--lh-snug) var(--font-sans); color: var(--fg-strong); }
.overline   { font: var(--fw-semibold) var(--fs-11)/var(--lh-snug) var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }

.mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num        { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.link       { color: var(--fg-link); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ============================================================
   Base reset for design-system surfaces
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--fg-default);
  font: var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

::selection { background: var(--brand-green-100); color: var(--slate-900); }