/* ============================================================
   Resource Commercial Real Estate — Design Tokens
   Source: Resource Brand Guidelines v1.0 (Aug 2023)
   ============================================================ */

/* Webfonts served via Google Fonts (see index.html) */

:root {
  /* ----- Core palette (strict: black + white dominate) ----- */
  --rc-black:        #171717;   /* approachable black — primary bg */
  --rc-white:        #FAFAFA;   /* approachable white — primary text on dark */
  --rc-true-black:   #000000;
  --rc-true-white:   #FFFFFF;

  /* ----- Accent palette (strict usage — max 2 per slide) ----- */
  --rc-green:        #098B6B;   /* Peacock Green — primary accent, headlines */
  --rc-purple:       #9B16C0;   /* Secondary — contrast / differentiation */
  --rc-gold:         #E2C46C;   /* Tertiary — CTAs, URLs, outcomes, end states */

  /* ----- Neutrals (derived, for quiet UI surfaces) ----- */
  --rc-ink-900:      #171717;
  --rc-ink-700:      #2A2A2A;
  --rc-ink-500:      #595959;
  --rc-ink-300:      #A8A8A8;
  --rc-ink-100:      #E5E5E5;
  --rc-ink-50:       #F2F2F2;
  --rc-paper:        #FAFAFA;

  /* ----- Semantic foreground / background ----- */
  --rc-bg:           var(--rc-black);
  --rc-surface:      #1E1E1E;
  --rc-surface-2:    #262626;
  --rc-hairline:     rgba(250, 250, 250, 0.14);
  --rc-hairline-strong: rgba(250, 250, 250, 0.28);

  --rc-fg:           var(--rc-white);
  --rc-fg-muted:     rgba(250, 250, 250, 0.72);
  --rc-fg-subtle:    rgba(250, 250, 250, 0.50);
  --rc-fg-faint:     rgba(250, 250, 250, 0.28);

  /* On light surfaces */
  --rc-fg-on-light:        var(--rc-ink-900);
  --rc-fg-on-light-muted:  var(--rc-ink-500);
  --rc-fg-on-light-subtle: var(--rc-ink-300);

  /* ----- Accent semantic aliases ----- */
  --rc-accent-primary:   var(--rc-green);   /* strategic emphasis */
  --rc-accent-secondary: var(--rc-purple);  /* contrast / differentiation */
  --rc-accent-cta:       var(--rc-gold);    /* outcomes, URLs, CTAs */

  /* ----- Typography ----- */
  --rc-font-heading:  'DM Serif Display', 'Times New Roman', Georgia, serif;  /* editorial serif */
  --rc-font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif; /* clean sans, body */
  --rc-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (modular, tuned for editorial density) */
  --rc-text-xs:   12px;
  --rc-text-sm:   14px;
  --rc-text-base: 16px;
  --rc-text-md:   18px;
  --rc-text-lg:   22px;
  --rc-text-xl:   28px;
  --rc-text-2xl:  36px;
  --rc-text-3xl:  48px;
  --rc-text-4xl:  64px;
  --rc-text-5xl:  84px;
  --rc-text-6xl:  112px;

  /* Line heights */
  --rc-leading-tight:  1.05;
  --rc-leading-snug:   1.20;
  --rc-leading-normal: 1.45;
  --rc-leading-relaxed:1.65;

  /* Tracking — tight on display, wide on eyebrow/labels */
  --rc-track-tight:   -0.02em;
  --rc-track-normal:  0;
  --rc-track-wide:    0.08em;
  --rc-track-wider:   0.18em;   /* "R E S O U R C E" wordmark tracking */
  --rc-track-widest:  0.28em;

  /* ----- Spacing (4px base) ----- */
  --rc-space-0:  0;
  --rc-space-1:  4px;
  --rc-space-2:  8px;
  --rc-space-3:  12px;
  --rc-space-4:  16px;
  --rc-space-5:  24px;
  --rc-space-6:  32px;
  --rc-space-7:  48px;
  --rc-space-8:  64px;
  --rc-space-9:  96px;
  --rc-space-10: 128px;

  /* Layout / margins */
  --rc-gutter-slide:   96px;    /* default slide inset */
  --rc-gutter-page:    64px;
  --rc-col-max:        1200px;
  --rc-measure:        62ch;    /* body line length cap */

  /* ----- Radii (Resource is almost-square — minimal rounding) ----- */
  --rc-radius-0:  0;
  --rc-radius-1:  2px;
  --rc-radius-2:  4px;
  --rc-radius-3:  8px;    /* cards, menus */
  --rc-radius-pill: 999px;

  /* ----- Borders ----- */
  --rc-border-hairline: 1px solid var(--rc-hairline);
  --rc-border-strong:   1px solid var(--rc-hairline-strong);
  --rc-border-on-light: 1px solid var(--rc-ink-100);

  /* ----- Shadows (restrained — brand forbids shadow on logo; use sparingly) ----- */
  --rc-shadow-1: 0 1px 2px rgba(0,0,0,0.25);
  --rc-shadow-2: 0 8px 24px rgba(0,0,0,0.35);
  --rc-shadow-3: 0 24px 64px rgba(0,0,0,0.45);

  /* ----- Motion ----- */
  --rc-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --rc-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --rc-dur-fast:    140ms;
  --rc-dur-base:    220ms;
  --rc-dur-slow:    420ms;

  /* ----- Focus ----- */
  --rc-focus-ring: 0 0 0 2px var(--rc-bg), 0 0 0 4px var(--rc-gold);
}

/* ===== Semantic element styles (opt-in via .rc-doc) ================ */

.rc-doc {
  background: var(--rc-bg);
  color: var(--rc-fg);
  font-family: var(--rc-font-body);
  font-weight: 400;
  font-size: var(--rc-text-base);
  line-height: var(--rc-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DM Serif Display ships at weight 400 only; do not apply 600/700. */
.rc-doc h1, .rc-h1 {
  font-family: var(--rc-font-heading);
  font-weight: 400;
  font-size: var(--rc-text-5xl);
  line-height: var(--rc-leading-tight);
  letter-spacing: var(--rc-track-tight);
  text-transform: none;
  margin: 0;
}

.rc-doc h2, .rc-h2 {
  font-family: var(--rc-font-heading);
  font-weight: 400;
  font-size: var(--rc-text-3xl);
  line-height: var(--rc-leading-snug);
  letter-spacing: var(--rc-track-tight);
  text-transform: none;
  margin: 0;
}

.rc-doc h3, .rc-h3 {
  font-family: var(--rc-font-body);
  font-weight: 600;
  font-size: var(--rc-text-xl);
  line-height: var(--rc-leading-snug);
  letter-spacing: 0;
  margin: 0;
}

.rc-doc h4, .rc-h4 {
  font-family: var(--rc-font-body);
  font-weight: 500;
  font-size: var(--rc-text-md);
  line-height: var(--rc-leading-snug);
  margin: 0;
}

.rc-doc p, .rc-p {
  font-family: var(--rc-font-body);
  font-weight: 400;
  font-size: var(--rc-text-base);
  line-height: var(--rc-leading-relaxed);
  max-width: var(--rc-measure);
  margin: 0;
}

/* Eyebrows use DM Sans (serif isn't built for small uppercase tracking). */
.rc-eyebrow {
  font-family: var(--rc-font-body);
  font-weight: 500;
  font-size: var(--rc-text-xs);
  letter-spacing: var(--rc-track-wider);
  text-transform: uppercase;
  color: var(--rc-fg-muted);
}

.rc-label {
  font-family: var(--rc-font-body);
  font-weight: 500;
  font-size: var(--rc-text-sm);
  letter-spacing: var(--rc-track-wide);
  text-transform: uppercase;
}

.rc-caption {
  font-family: var(--rc-font-body);
  font-weight: 400;
  font-size: var(--rc-text-sm);
  line-height: var(--rc-leading-normal);
  color: var(--rc-fg-muted);
}

.rc-doc code, .rc-code {
  font-family: var(--rc-font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  background: rgba(250,250,250,0.08);
  border-radius: var(--rc-radius-2);
}

/* Accent text utilities — use sparingly, never more than 2 accents per view */
.rc-accent-green   { color: var(--rc-green); }
.rc-accent-purple  { color: var(--rc-purple); }
.rc-accent-gold    { color: var(--rc-gold); }

/* Divider — brand uses hairlines heavily */
.rc-rule {
  border: 0;
  border-top: 1px solid var(--rc-hairline);
  margin: 0;
}