/* ============================================================================
   Rentora Design System — Tokens
   ============================================================================ */

:root {
  /* ── Core palette ── */
  --ink:            #0a0a0a;   /* primary foreground + active surfaces */
  --ink-soft:       #1f1f1f;   /* hover state on ink surfaces */
  --paper:          #ffffff;   /* card + input backgrounds */
  --canvas:         #f5f5f5;   /* app background, hover fill */
  --canvas-alt:     #f4f4f4;   /* alternate neutral (feature cards, tab tracks) */
  --canvas-warm:    #f7f7f7;   /* map surface */

  /* ── Borders + dividers ── */
  --hairline:       #e3e3e3;   /* every visible border */
  --hairline-soft:  #efefef;   /* inner dividers (list rows, card header underline) */
  --hairline-muted: #dcdcdc;   /* map feature borders */

  /* ── Text scale ── */
  --fg-strong:      #0a0a0a;   /* headlines, body emphasis */
  --fg:             #444444;   /* body default */
  --fg-muted:       #8a8a8a;   /* meta, timestamps, unit labels */
  --fg-on-ink:      #ffffff;
  --fg-on-ink-soft: #bdbdbd;   /* subhead on dark CTAs */
  --fg-on-ink-mute: rgba(255,255,255,0.55);

  /* ── Placeholder / map tones ── */
  --hatch-light:    #ededed;
  --hatch-dark:     #e0e0e0;
  --map-park:       #ededed;
  --map-water:      #e5e5e5;
  --map-street:     #d0d0d0;
  --map-arterial:   #b8b8b8;

  /* ── Dormant brand accents (declared in tailwind.config.js, NOT used in shipped UI) ── */
  --accent:         #c8522a;
  --accent-light:   #e8784e;
  --sage:           #5a7a5e;
  --gold:           #c9a84c;
  --muted-warm:     #8a8070;
  --cream:          #f5f2ec;  /* defined in body {} of index.css, overridden by canvas elsewhere */

  /* ── Radii ── */
  --r-sm:   8px;    /* kbd chips, tiny controls */
  --r-md:   10px;   /* nav items, map controls */
  --r-lg:   14px;   /* inner cards, chips, map callouts */
  --r-xl:   20px;   /* primary cards, listing cards */
  --r-2xl:  28px;   /* hero showcase, CTA block */
  --r-pill: 999px;  /* buttons, search, avatars, badges */

  /* ── Spacing (only the values that actually recur) ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  44px;
  --sp-12:  56px;
  --sp-16:  80px;
  --sp-20:  96px;

  /* ── Shadows ── */
  --shadow-card:        0 1px 8px rgba(0,0,0,0.05);
  --shadow-card-hover:  0 12px 36px rgba(0,0,0,0.12);
  --shadow-pop:         0 6px 14px -4px rgba(0,0,0,0.25);   /* map pins, small popovers */
  --shadow-float:       0 20px 48px -24px rgba(0,0,0,0.2);  /* floating side panels */
  --shadow-hero:        0 24px 60px -28px rgba(0,0,0,0.18); /* hero showcase */
  --shadow-fab:         0 10px 24px -10px rgba(0,0,0,0.4);  /* mobile FAB */

  /* ── Type families ── */
  --font-serif: "Instrument Serif", "Playfair Display", Georgia, serif;
  --font-sans:  "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type sizes ── */
  --fs-mono:       10.5px;
  --fs-meta:       11px;
  --fs-xs:         12px;
  --fs-sm:         13px;
  --fs-base:       14px;
  --fs-body:       15px;
  --fs-lg:         18px;
  --fs-card-title: 22px;
  --fs-number:     32px;   /* stat numbers in serif */
  --fs-h3:         26px;
  --fs-h2-big:     clamp(34px, 4.2vw, 52px);
  --fs-h1-big:     clamp(44px, 5.5vw, 82px);

  /* ── Tracking ── */
  --track-mono:    0.08em;   /* eyebrows, labels */
  --track-display: -0.025em; /* marketing H1 */
  --track-card:    -0.01em;  /* card titles, stat numbers */
  --track-h2:      -0.02em;
}

/* ============================================================================
   Semantic type rules
   ============================================================================ */

body {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

.t-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1-big);
  line-height: 0.98;
  letter-spacing: var(--track-display);
  color: var(--fg-strong);
}

.t-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2-big);
  line-height: 1.02;
  letter-spacing: var(--track-h2);
  color: var(--fg-strong);
}

.t-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--track-card);
  color: var(--fg-strong);
}

.t-card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-card-title);
  letter-spacing: var(--track-card);
  color: var(--fg-strong);
}

.t-number {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-number);
  line-height: 1.05;
  letter-spacing: var(--track-h2);
  color: var(--fg-strong);
}

.t-italic-accent { font-style: italic; }

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg);
}

.t-sm        { font-size: var(--fs-sm); color: var(--fg); }
.t-meta      { font-size: var(--fs-meta); color: var(--fg-muted); }

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--fg-muted);
}

.t-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
  border: 1px solid var(--hairline);
  padding: 2px 6px;
  border-radius: 5px;
}

/* ============================================================================
   Surfaces
   ============================================================================ */

.surface-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

.surface-card-inner {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}

.surface-ink {
  background: var(--ink);
  color: var(--fg-on-ink);
  border-radius: var(--r-2xl);
}

.hairline-top    { border-top:    1px solid var(--hairline-soft); }
.hairline-bottom { border-bottom: 1px solid var(--hairline-soft); }

/* ============================================================================
   Pattern — placeholder hatch
   ============================================================================ */

.hatch {
  background: repeating-linear-gradient(45deg,
    var(--hatch-light) 0 6px,
    var(--hatch-dark) 6px 12px);
}