/* =============================================================
   RenovateMate · colors_and_type.css
   Drop-in CSS variables for type + color (dark + light themes)
   Source: RenovateMate Brand Kit v1.0 · May 2026
   ============================================================= */

/* Fonts (Google Fonts — no local files required) ------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --rm-orange:           #D4851A;   /* Primary · all CTAs */
  --rm-orange-hover:     #E8A040;   /* Hover / active */
  --rm-orange-light:     #F0B060;   /* Subtle accents */

  /* Orange overlays (use as rgba — never flatten to hex) */
  --rm-orange-rgb:       212, 133, 26;
  --rm-orange-tint-8:    rgba(212, 133, 26, 0.08);   /* bg tint */
  --rm-orange-tint-10:   rgba(212, 133, 26, 0.10);   /* glow */
  --rm-orange-tint-15:   rgba(212, 133, 26, 0.15);   /* press / featured bg */
  --rm-orange-border:    rgba(212, 133, 26, 0.20);   /* accent border */

  /* Ambient glow used on featured cards */
  --rm-glow:             0 0 28px rgba(212, 133, 26, 0.10);

  /* ---------- DARK THEME (default) ---------- */
  --rm-bg:               #0A0A0A;   /* page background */
  --rm-bg-card:          #111111;   /* card backgrounds */
  --rm-bg-tertiary:      #181818;   /* input fields */
  --rm-divider:          #252525;   /* very faint */
  --rm-border:           #1E1E1E;   /* card borders */
  --rm-border-2:         #2A2A2A;   /* input borders */
  --rm-faint:            #555555;   /* placeholder text */
  --rm-muted:            #888888;   /* secondary text */
  --rm-text:             #F2F2F2;   /* primary body text */
  --rm-text-2:           #CFCBC4;   /* secondary headings on dark */

  /* ---------- TYPE FAMILIES ---------- */
  --rm-font-display:     'DM Serif Display', Georgia, 'Times New Roman', serif;
  --rm-font-sans:        'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --rm-font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  /* ---------- SPACING (4px base) ---------- */
  --rm-space-1:  4px;
  --rm-space-2:  8px;
  --rm-space-3:  12px;
  --rm-space-4:  16px;
  --rm-space-5:  20px;
  --rm-space-6:  24px;
  --rm-space-8:  32px;
  --rm-space-10: 40px;
  --rm-space-12: 48px;
  --rm-space-16: 64px;
  --rm-space-20: 80px;

  /* ---------- RADII ---------- */
  --rm-radius-website-sm: 2px;   /* website inputs / chip */
  --rm-radius-website:    8px;   /* website cards */
  --rm-radius-app:        12px;  /* app cards */
  --rm-radius-input:      8px;   /* app inputs */
  --rm-radius-ghost:      4px;   /* ghost / secondary buttons */
  --rm-radius-pill:       50px;  /* primary CTAs */

  /* ---------- LAYOUT ---------- */
  --rm-content-max:      860px;
  --rm-nav-height:       54px;
  --rm-bottom-nav:       60px;

  /* ---------- MOTION ---------- */
  --rm-transition:       0.2s ease;
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"],
:root.light,
.theme-light {
  --rm-bg:               #F5F3EF;
  --rm-bg-card:          #FFFFFF;
  --rm-bg-tertiary:      #EDE9E2;
  --rm-divider:          #E5E1D8;
  --rm-border:           #DDD9D0;
  --rm-border-2:         #CAC5BC;
  --rm-faint:            #9A9590;
  --rm-muted:            #6A6560;
  --rm-text:             #141210;
  --rm-text-2:           #3A3530;
}

/* =============================================================
   BASE TYPOGRAPHY · raw type styles
   Use the semantic classes below by preference.
   ============================================================= */

html, body {
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: var(--rm-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =============================================================
   SEMANTIC TYPE · use these directly on elements
   ============================================================= */

.rm-hero-h1 {
  font-family: var(--rm-font-display);
  font-weight: 400;
  font-size: clamp(52px, 6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--rm-text);
}

.rm-display-h1 {
  font-family: var(--rm-font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--rm-text);
}

.rm-h2 {
  font-family: var(--rm-font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
  color: var(--rm-text);
}

.rm-h3 {
  font-family: var(--rm-font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--rm-text);
}

.rm-h4 {
  font-family: var(--rm-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--rm-text);
}

.rm-body-lg {
  font-family: var(--rm-font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rm-text-2);
}

.rm-body {
  font-family: var(--rm-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  color: var(--rm-text);
}

.rm-body-sm {
  font-family: var(--rm-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
  color: var(--rm-muted);
}

.rm-caption {
  font-family: var(--rm-font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
  color: var(--rm-muted);
}

.rm-eyebrow {
  font-family: var(--rm-font-sans);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rm-orange);
}

.rm-mono {
  font-family: var(--rm-font-mono);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--rm-muted);
}

/* =============================================================
   ELEMENTAL DEFAULTS · so plain HTML lands close to brand
   ============================================================= */

h1 { font-family: var(--rm-font-display); font-weight: 400; font-size: 52px; line-height: 1.08; letter-spacing: -0.005em; margin: 0 0 var(--rm-space-4); }
h2 { font-family: var(--rm-font-display); font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0 0 var(--rm-space-3); }
h3 { font-family: var(--rm-font-sans);    font-weight: 500; font-size: 20px; line-height: 1.25; margin: 0 0 var(--rm-space-2); }
h4 { font-family: var(--rm-font-sans);    font-weight: 500; font-size: 14px; line-height: 1.3;  margin: 0 0 var(--rm-space-2); }
p  { margin: 0 0 var(--rm-space-3); }
a  { color: var(--rm-orange); text-decoration: none; transition: color var(--rm-transition); }
a:hover { color: var(--rm-orange-hover); }
code, kbd, samp { font-family: var(--rm-font-mono); font-size: 0.92em; color: var(--rm-muted); }
hr { border: 0; border-top: 1px solid var(--rm-border); margin: var(--rm-space-6) 0; }