/* ==========================================================================
   Loan Ryder Finance — Colors & Type
   The single source of truth for tokens + semantic helpers.
   ========================================================================== */

/* Fonts — Playfair Display + Inter (self-hosted, WOFF2 primary, TTF fallback). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter_28pt-Regular.woff2') format('woff2'), url('fonts/Inter_28pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter_28pt-Medium.woff2') format('woff2'), url('fonts/Inter_28pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter_28pt-SemiBold.woff2') format('woff2'), url('fonts/Inter_28pt-SemiBold.ttf') format('truetype'); }

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PlayfairDisplay-Regular.woff2') format('woff2'), url('fonts/PlayfairDisplay-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/PlayfairDisplay-Italic.woff2') format('woff2'), url('fonts/PlayfairDisplay-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/PlayfairDisplay-Bold.woff2') format('woff2'), url('fonts/PlayfairDisplay-Bold.ttf') format('truetype'); }

:root {
  /* --------------------------------------------------------------------- */
  /* COLORS — BRAND & ACCENT                                                */
  /* --------------------------------------------------------------------- */
  --color-primary: #264639;            /* signature dark green */
  --color-primary-active: #1a3329;     /* press/active state */
  --color-primary-disabled: #d3dcd7;   /* desaturated cream-tinted disabled */
  --color-accent-teal: #4e8b8f;        /* sparing accent — status, tags, step numbers, hover labels */

  /* --------------------------------------------------------------------- */
  /* COLORS — SURFACES                                                      */
  /* --------------------------------------------------------------------- */
  --color-canvas: #f4f0e6;             /* default page floor — tinted cream */
  --color-surface-soft: #eee9db;       /* very-soft band */
  --color-surface-card: #ebe4d5;       /* feature cards, content cards */
  --color-surface-cream-strong: #e1d8c3;
  --color-surface-dark: #15261f;       /* deep pine — mockups, footer */
  --color-surface-dark-elevated: #1e362d;
  --color-surface-dark-soft: #1a2e26;
  --color-hairline: #dcd5c7;
  --color-hairline-soft: #e6dfd1;

  /* --------------------------------------------------------------------- */
  /* COLORS — TEXT                                                          */
  /* --------------------------------------------------------------------- */
  --color-ink: #264639;                /* matches primary; never #000 */
  --color-body-strong: #1e362d;
  --color-body: #3c5248;
  --color-muted: #6c7a72;
  --color-muted-soft: #8b9991;
  --color-on-primary: #ffffff;
  --color-on-dark: #f4f0e6;
  --color-on-dark-soft: #a3b0a9;

  /* --------------------------------------------------------------------- */
  /* COLORS — SEMANTIC                                                      */
  /* --------------------------------------------------------------------- */
  --color-success: #4c9f70;
  --color-warning: #d4a017;
  --color-error: #c64545;

  /* --------------------------------------------------------------------- */
  /* TYPE                                                                   */
  /* --------------------------------------------------------------------- */
  --font-serif: 'Playfair Display', 'Optima', 'Trajan Pro', Georgia, serif;
  --font-sans: 'Inter', 'StyreneB', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'Inter', 'SF Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Display — serif, weight 400 */
  --type-display-xl-size: 64px;     --type-display-xl-lh: 1.05;  --type-display-xl-tracking: -0.5px;
  --type-display-lg-size: 48px;     --type-display-lg-lh: 1.1;   --type-display-lg-tracking: 0;
  --type-display-md-size: 36px;     --type-display-md-lh: 1.15;  --type-display-md-tracking: 0.5px;
  --type-display-sm-size: 28px;     --type-display-sm-lh: 1.2;   --type-display-sm-tracking: 0.5px;

  /* Title — sans, weight 500 */
  --type-title-lg-size: 22px;       --type-title-lg-lh: 1.3;
  --type-title-md-size: 18px;       --type-title-md-lh: 1.4;
  --type-title-sm-size: 16px;       --type-title-sm-lh: 1.4;

  /* Body — sans */
  --type-body-md-size: 16px;        --type-body-md-lh: 1.55;
  --type-body-sm-size: 14px;        --type-body-sm-lh: 1.55;

  /* Caption */
  --type-caption-size: 13px;        --type-caption-lh: 1.4;
  --type-caption-up-size: 12px;     --type-caption-up-lh: 1.4;  --type-caption-up-tracking: 1.5px;

  /* Data + UI */
  --type-data-size: 14px;           --type-data-lh: 1.6;
  --type-button-size: 14px;         --type-button-lh: 1.0;
  --type-nav-size: 14px;            --type-nav-lh: 1.4;

  /* --------------------------------------------------------------------- */
  /* SPACING — 4px base                                                     */
  /* --------------------------------------------------------------------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* --------------------------------------------------------------------- */
  /* RADIUS                                                                 */
  /* --------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* buttons, inputs */
  --radius-lg: 12px;    /* content cards */
  --radius-xl: 16px;    /* hero illustration container */
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------- */
  /* ELEVATION (rarely used)                                                */
  /* --------------------------------------------------------------------- */
  --shadow-soft: 0 1px 3px rgba(38, 70, 57, 0.08);

  /* --------------------------------------------------------------------- */
  /* MOTION                                                                 */
  /* --------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-quick: 180ms;

  /* --------------------------------------------------------------------- */
  /* LAYOUT                                                                 */
  /* --------------------------------------------------------------------- */
  --content-max: 1200px;
}

/* ==========================================================================
   GLOBAL DEFAULTS
   ========================================================================== */
html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* ==========================================================================
   SEMANTIC TYPE HELPERS
   ========================================================================== */
.h1, h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--color-ink);
  margin: 0;
}
.h2, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  color: var(--color-ink);
  margin: 0;
}
.h3, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-tracking);
  color: var(--color-ink);
  margin: 0;
}
.display-sm {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-lh);
  letter-spacing: var(--type-display-sm-tracking);
  color: var(--color-ink);
}

.title-lg {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-title-lg-size);
  line-height: var(--type-title-lg-lh);
  color: var(--color-ink);
}
.title-md {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-lh);
  color: var(--color-ink);
}
.title-sm {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-title-sm-size);
  line-height: var(--type-title-sm-lh);
  color: var(--color-ink);
}

.body-md, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
  margin: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--color-body);
}
.caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--color-muted);
}
.caption-uppercase {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-caption-up-size);
  line-height: var(--type-caption-up-lh);
  letter-spacing: var(--type-caption-up-tracking);
  text-transform: uppercase;
  color: var(--color-muted);
}
.data {
  font-family: var(--font-data);
  font-weight: 400;
  font-size: var(--type-data-size);
  line-height: var(--type-data-lh);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-ink);
}

/* ==========================================================================
   COMPONENT HELPERS — minimal cosmetic primitives
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-button-size);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-standard),
              border-color var(--duration-quick) var(--ease-standard),
              color var(--duration-quick) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover { background: var(--color-primary-active); }
.btn-primary:active { background: var(--color-primary-active); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: var(--color-primary-disabled);
  color: var(--color-muted);
  cursor: not-allowed;
}
.btn-secondary {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-color: var(--color-hairline);
}
.btn-secondary:hover { border-color: var(--color-primary); }
.btn-secondary-on-dark {
  background: var(--color-surface-dark-elevated);
  color: var(--color-on-dark);
  border-color: transparent;
}
.btn-cream-on-dark {
  background: var(--color-canvas);
  color: var(--color-ink);
}

/* Text link */
.text-link {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-quick) var(--ease-standard);
}
.text-link:hover { border-bottom-color: var(--color-primary); }

/* Inputs */
.input {
  height: 40px;
  padding: 0 14px;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-quick) var(--ease-standard);
  width: 100%;
  box-sizing: border-box;
}
.input::placeholder { color: var(--color-muted-soft); }
.input:focus { border-color: var(--color-primary); }

/* Cards */
.card-feature {
  background: var(--color-surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.card-dark {
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.card-dark .body-md, .card-dark p { color: var(--color-on-dark-soft); }
.card-dark .h1, .card-dark .h2, .card-dark .h3,
.card-dark h1, .card-dark h2, .card-dark h3,
.card-dark .display-sm { color: var(--color-on-dark); }

.card-callout-green {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xxl);
}
.card-callout-green h1, .card-callout-green h2, .card-callout-green h3,
.card-callout-green .display-sm { color: var(--color-on-primary); }

/* Badges */
.badge-green {
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-caption-up-size);
  letter-spacing: var(--type-caption-up-tracking);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}
.badge-cream {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-cream-strong);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-caption-up-size);
  letter-spacing: var(--type-caption-up-tracking);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

/* Section rhythm */
.section { padding: var(--space-section) 0; }
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}