/* ============================================================
   Action Advisors / eXp Commercial — Design Tokens
   v1.0 — 2026-04-30  |  Authored by ListingOps brand agent
   ------------------------------------------------------------
   See: website_redesign/research/brand-brief.md
   Imported by every page in the redesign mockup.
   No frameworks. Plain CSS custom properties.

   This file declares both:
     (1) The new opinionated token names (--color-*, --fs-*, etc.)
     (2) Aliases for the placeholder names already used by the
         scaffolding (--bg-page, --t-1, --accent, --s-*, etc.)
   so existing pages keep rendering while the new system rolls in.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — One signature accent + warm neutral system.
     ============================================================ */
  --color-accent:           #1F4A5C;   /* Limestone Blue — single signature color */
  --color-accent-hover:     #173846;   /* darker shift for hover/pressed */
  --color-accent-wash:      #E7EEF1;   /* pale fill, sparingly */
  --color-accent-faint:     rgba(31, 74, 92, 0.06);  /* watermarks, footer star */

  --color-ink:              #0E1216;   /* primary text, headlines */
  --color-graphite:         #3A4048;   /* secondary text */
  --color-slate:            #6E767F;   /* tertiary text, metadata */
  --color-hairline:         #D9D6D0;   /* rules, table borders */
  --color-paper:            #F6F4EE;   /* page background — warmer than white */
  --color-surface:          #FFFFFF;   /* cards, hover states */
  --color-skeleton:         #EDEAE3;   /* loading skeleton blocks */

  --color-error:            #A04040;   /* desaturated brick — error-only */
  --color-success:          #4A6B52;   /* desaturated forest — success-only */
  --color-warning:          #B58235;   /* desaturated amber */

  /* Aliases (back-compat with placeholder scaffolding) */
  --bg-page:                var(--color-paper);
  --bg-raised:              var(--color-surface);
  --bg-surface:             #EFECE5;
  --bg-inverse:             var(--color-ink);
  --bg-inverse-raised:      #1A1F25;

  --t-1:                    var(--color-ink);
  --t-2:                    var(--color-graphite);
  --t-3:                    var(--color-slate);
  --t-4:                    #A4A8AE;
  --t-inverse:              #F1EEE7;

  --border:                 rgba(14, 18, 22, 0.10);
  --border-strong:          rgba(14, 18, 22, 0.18);

  --accent:                 var(--color-accent);
  --accent-soft:            var(--color-accent-wash);
  --accent-strong:          var(--color-accent-hover);

  --green:                  var(--color-success);
  --amber:                  var(--color-warning);
  --red:                    var(--color-error);

  /* ============================================================
     TYPOGRAPHY
     Fraunces (display) + Inter (body/UI) + JetBrains Mono (data)
     ============================================================ */
  --font-display:  'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (8pt-derived) */
  --fs-display-xl: 64px;
  --fs-display-l:  48px;
  --fs-h1:         36px;
  --fs-h2:         28px;
  --fs-h3:         20px;
  --fs-body:       17px;
  --fs-small:      14px;
  --fs-caption:    12px;
  --fs-mono:       13px;

  /* Line heights */
  --lh-display-xl: 1.06;
  --lh-display-l:  1.08;
  --lh-h1:         1.16;
  --lh-h2:         1.22;
  --lh-h3:         1.40;
  --lh-body:       1.65;
  --lh-small:      1.55;

  /* Letter spacing */
  --ls-display:    -0.02em;
  --ls-h:          -0.01em;
  --ls-body:        0;
  --ls-eyebrow:     0.18em;     /* uppercase eyebrow labels */
  --ls-wordmark:    0.16em;     /* logo wordmark */

  /* Weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* ============================================================
     SPACING (8pt grid)
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  144px;

  /* Aliases */
  --s-1:  var(--space-1);
  --s-2:  var(--space-2);
  --s-3:  var(--space-3);
  --s-4:  var(--space-4);
  --s-5:  var(--space-5);
  --s-6:  var(--space-6);
  --s-7:  var(--space-7);
  --s-8:  var(--space-8);
  --s-9:  var(--space-9);
  --s-10: var(--space-10);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-width-prose:    680px;
  --max-width-content: 1080px;
  --max-width-wide:    1280px;
  --gutter-mobile:      20px;
  --gutter-tablet:      32px;
  --gutter-desktop:     48px;

  --page-max:           var(--max-width-content);
  --page-pad:           clamp(20px, 4vw, 64px);

  /* ============================================================
     RADII — restrained
     ============================================================ */
  --radius-none:   0;
  --radius-sm:     2px;     /* form inputs, tags */
  --radius-md:     4px;     /* cards, buttons */
  --radius-lg:     8px;     /* modals, image masks */
  --radius-pill:   9999px;  /* filter chips only */

  --radius:        var(--radius-md);

  /* ============================================================
     ELEVATION — hairline rules first; shadows soft and low
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(14, 18, 22, 0.04), 0 1px 1px rgba(14, 18, 22, 0.02);
  --shadow-2: 0 4px 12px rgba(14, 18, 22, 0.06), 0 1px 2px rgba(14, 18, 22, 0.03);
  --shadow-3: 0 16px 40px rgba(14, 18, 22, 0.08), 0 2px 6px rgba(14, 18, 22, 0.04);

  --border-hairline:  1px solid var(--color-hairline);
  --border-accent:    1px solid var(--color-accent);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1.2);
  --ease:          var(--ease-standard);

  --duration-fast:        120ms;
  --duration-base:        180ms;
  --duration-slow:        240ms;
  --duration-deliberate:  360ms;

  --dur-fast: var(--duration-fast);
  --dur-mid:  var(--duration-slow);
  --dur-slow: var(--duration-deliberate);

  /* ============================================================
     FOCUS
     ============================================================ */
  --focus-ring: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-accent);

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* ============================================================
   DARK MODE — opt-in via [data-theme="dark"] on <html>.
   prefers-color-scheme is intentionally NOT auto-applied: the
   marketing site reads best in light by default; we let the user
   choose.
   ============================================================ */
[data-theme="dark"] {
  --color-ink:        #F1EEE7;
  --color-paper:      #0E1216;
  --color-surface:    #161A20;
  --color-hairline:   #2A3038;
  --color-graphite:   #B8BEC4;
  --color-slate:      #8A929A;
  --color-skeleton:   #1F252D;
  --color-accent-wash: rgba(31, 74, 92, 0.18);

  --bg-page:        var(--color-paper);
  --bg-raised:      var(--color-surface);
  --bg-surface:     #1A2028;
  --t-1:            var(--color-ink);
  --t-2:            var(--color-graphite);
  --t-3:            var(--color-slate);
  --t-4:            #4A525E;
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
}

/* ============================================================
   GLOBAL TYPE BASELINE
   These rules cover the default look. Page-level CSS should
   compose against the tokens above rather than redeclare here.
   ============================================================ */
html {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
}

h1, .h1, h2, .h2, .display-l, .display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-h);
  color: var(--color-ink);
  margin: 0;
}

.display-xl  { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display); font-weight: var(--fw-regular); }
.display-l   { font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--ls-display); font-weight: var(--fw-regular); }
h1, .h1      { font-size: var(--fs-h1);         line-height: var(--lh-h1); }
h2, .h2      { font-size: var(--fs-h2);         line-height: var(--lh-h2); }

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--color-ink);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-slate);
}

.mono, code, kbd, samp, pre, .data {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
a:hover, a:focus-visible {
  border-bottom-color: var(--color-accent);
}
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

hr {
  border: none;
  border-top: var(--border-hairline);
  margin: var(--space-7) 0;
}

::selection {
  background: var(--color-accent);
  color: var(--color-paper);
}

/* ============================================================
   PRIMITIVES — minimal, opinionated. The frontend agent extends
   these in page-level CSS.
   ============================================================ */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.button--primary {
  background: var(--color-accent);
  color: var(--color-paper);
}
.button--primary:hover { background: var(--color-accent-hover); }

.button--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-hairline);
}
.button--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-graphite);
  background: var(--color-accent-wash);
  border-radius: var(--radius-pill);
}

.rule {
  border: none;
  border-top: var(--border-hairline);
  height: 0;
  margin: 0;
}