/* Realtie Design System — colors + typography tokens
 * Source: Paper design "V1 · Editorial Blue" + brand brief.
 * Usage: link this file, then use the var(--…) tokens below.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ─── PRIMARY (Sky) ─────────────────────────────────────────── */
  --sky-50:  #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-200: #BAE6FD;
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;   /* brand primary */
  --sky-700: #0369A1;
  --sky-800: #075985;
  --sky-900: #0C4A6E;

  --brand:        var(--sky-600);
  --brand-hover:  var(--sky-700);
  --brand-soft:   var(--sky-50);
  --brand-soft-2: var(--sky-100);
  --brand-border: var(--sky-200);
  --brand-on-dark:var(--sky-300);

  /* ─── NEUTRAL (Slate) ───────────────────────────────────────── */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ─── SEMANTIC SURFACES ─────────────────────────────────────── */
  --bg:           #FFFFFF;
  --bg-alt:       var(--slate-50);
  --bg-inverse:   var(--slate-900);

  --fg-1:         var(--slate-900);   /* headlines */
  --fg-2:         var(--slate-700);   /* body */
  --fg-3:         var(--slate-500);   /* muted */
  --fg-4:         var(--slate-400);   /* placeholder */
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: var(--slate-300);
  --fg-on-dark-3: var(--slate-400);

  --border:       var(--slate-200);
  --border-strong:var(--slate-300);

  /* ─── ACCENTS (sparingly, for in-product tags) ──────────────── */
  --tag-blue-bg:    #DBEAFE;
  --tag-blue-fg:    #1D4ED8;
  --tag-blue-bd:    #93C5FD;
  --tag-green-bg:   #ECFDF5;
  --tag-green-fg:   #047857;
  --tag-orange-bg:  #FFF7ED;
  --tag-orange-fg:  #C2410C;
  --tag-indigo-bg:  #EFF6FF;
  --tag-indigo-fg:  #1E3A8A;
  --tag-indigo-bd:  #BFDBFE;

  /* ─── RADII ─────────────────────────────────────────────────── */
  --r-chip:    10px;
  --r-tag:     12px;
  --r-card-sm: 14px;
  --r-card:    16px;
  --r-card-lg: 20px;
  --r-card-xl: 22px;
  --r-pill:    999px;

  /* ─── SHADOW (the system avoids elevation; this is the rare case) */
  --shadow-soft: 0 8px 24px -8px rgba(15, 23, 42, 0.08);
  --shadow-pop:  0 12px 32px -10px rgba(15, 23, 42, 0.16);

  /* ─── SPACING (4-pt grid; named anchors) ────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-14: 56px;
  --s-18: 72px;
  --s-22: 88px;
  --s-24: 96px;

  /* container */
  --container: 1120px;

  /* ─── TYPE FAMILIES ─────────────────────────────────────────── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  /* ─── TYPE SCALE (size / line-height / weight / tracking) ───── */
  --t-display-size:   72px; --t-display-lh:   76px; --t-display-w: 800; --t-display-tr: -0.03em;
  --t-h1-size:        48px; --t-h1-lh:        52px; --t-h1-w: 780; --t-h1-tr: -0.03em;
  --t-h2-size:        46px; --t-h2-lh:        50px; --t-h2-w: 780; --t-h2-tr: -0.02em;
  --t-h3-size:        42px; --t-h3-lh:        46px; --t-h3-w: 750; --t-h3-tr: -0.02em;
  --t-headline-size:  28px; --t-headline-lh:  34px; --t-headline-w: 740; --t-headline-tr: -0.01em;
  --t-subhead-size:   22px; --t-subhead-lh:   33px; --t-subhead-w: 400; --t-subhead-tr: 0;
  --t-bodylg-size:    17px; --t-bodylg-lh:    27px; --t-bodylg-w: 400; --t-bodylg-tr: 0;
  --t-body-size:      15px; --t-body-lh:      22px; --t-body-w: 400; --t-body-tr: 0;
  --t-small-size:     14px; --t-small-lh:     20px; --t-small-w: 400; --t-small-tr: 0;
  --t-micro-size:     13px; --t-micro-lh:     16px; --t-micro-w: 600; --t-micro-tr: 0;
  --t-eyebrow-size:   13px; --t-eyebrow-lh:   16px; --t-eyebrow-w: 700; --t-eyebrow-tr: 0.05em;
}

/* ─── GLOBAL RESET-ISH ────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  :root {
    --t-display-size: 38px; --t-display-lh: 44px;
    --t-h1-size:      32px; --t-h1-lh:      38px;
    --t-h2-size:      28px; --t-h2-lh:      34px;
    --t-h3-size:      24px; --t-h3-lh:      30px;
    --t-subhead-size: 17px; --t-subhead-lh: 26px;
  }
}

/* ─── SEMANTIC TYPE CLASSES ───────────────────────────────────── */
.t-display, h1.display {
  font: var(--t-display-w) var(--t-display-size)/var(--t-display-lh) var(--font-sans);
  letter-spacing: var(--t-display-tr);
  color: var(--fg-1);
}
h1, .t-h1 {
  font: var(--t-h1-w) var(--t-h1-size)/var(--t-h1-lh) var(--font-sans);
  letter-spacing: var(--t-h1-tr);
  color: var(--fg-1);
  margin: 0;
}
h2, .t-h2 {
  font: var(--t-h2-w) var(--t-h2-size)/var(--t-h2-lh) var(--font-sans);
  letter-spacing: var(--t-h2-tr);
  color: var(--fg-1);
  margin: 0;
}
h3, .t-h3 {
  font: var(--t-h3-w) var(--t-h3-size)/var(--t-h3-lh) var(--font-sans);
  letter-spacing: var(--t-h3-tr);
  color: var(--fg-1);
  margin: 0;
}
.t-headline {
  font: var(--t-headline-w) var(--t-headline-size)/var(--t-headline-lh) var(--font-sans);
  letter-spacing: var(--t-headline-tr);
  color: var(--fg-1);
}
.t-subhead {
  font: var(--t-subhead-w) var(--t-subhead-size)/var(--t-subhead-lh) var(--font-sans);
  color: var(--fg-2);
}
.t-bodylg, p.lg {
  font: var(--t-bodylg-w) var(--t-bodylg-size)/var(--t-bodylg-lh) var(--font-sans);
  color: var(--fg-2);
}
p, .t-body {
  font: var(--t-body-w) var(--t-body-size)/var(--t-body-lh) var(--font-sans);
  color: var(--fg-2);
  margin: 0;
}
.t-small  { font: 400 14px/20px var(--font-sans); color: var(--fg-3); }
.t-micro  { font: 600 13px/16px var(--font-sans); color: var(--fg-1); }

.t-eyebrow {
  font: 700 13px/16px var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
}
.t-eyebrow.on-dark { color: var(--brand-on-dark); }

.t-num-hero    { font: 800 56px/58px var(--font-sans); letter-spacing: -0.03em; color: var(--fg-1); }
.t-num-large   { font: 800 46px/48px var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); }
.t-num-medium  { font: 800 40px/42px var(--font-sans); color: var(--fg-1); }
.t-num-small   { font: 800 38px/40px var(--font-sans); color: var(--fg-1); }

/* ─── LOGO ────────────────────────────────────────────────────── */
.realtie-logo {
  font: 800 30px/36px var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.realtie-logo .dot { color: var(--brand); }