/* ============================================================
   SOLD WITH PAUL — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ---------- Web fonts (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLOR — Core palette
     ============================================================ */

  /* Primary surfaces & text */
  --color-graphite:        #1A1D23;   /* Deep Graphite — headlines, body, dark surfaces */
  --color-paper:           #F8F6F2;   /* Paper White — primary background */
  --color-stone:           #E7E2DA;   /* Soft Stone — cards, secondary surfaces */

  /* Accent (use sparingly — bronze is punctuation, not paint) */
  --color-bronze:          #B8844B;   /* Warm Bronze — accent only */
  --color-bronze-soft:     #C9A073;   /* derived — for subtle hover lift, not primary */

  /* Neutrals */
  --color-warm-gray:       #6B6863;   /* Warm Gray — captions, metadata, disclaimers */
  --color-warm-gray-2:     #8F8C86;   /* derived — secondary metadata */
  --color-rule:            rgba(107, 104, 99, 0.22);  /* hairline dividers */

  /* Data only — never as a brand accent */
  --color-blue:            #2C5F7F;   /* Precise Blue — charts, market data */

  /* Forbidden anchors (here for reference; never reference these vars) */
  --color-pure-black:      #000000;   /* DO NOT USE */
  --color-pure-white:      #FFFFFF;   /* DO NOT USE */

  /* ============================================================
     SEMANTIC COLOR
     ============================================================ */
  --bg:                    var(--color-paper);
  --bg-alt:                var(--color-stone);
  --bg-inverse:            var(--color-graphite);

  --fg:                    var(--color-graphite);
  --fg-muted:              var(--color-warm-gray);
  --fg-soft:               var(--color-warm-gray-2);
  --fg-inverse:            var(--color-paper);

  --accent:                var(--color-bronze);
  --accent-on-dark:        var(--color-bronze);

  --rule:                  var(--color-rule);
  --rule-strong:           var(--color-graphite);
  --rule-bronze:           var(--color-bronze);

  --data:                  var(--color-blue);

  /* ============================================================
     TYPOGRAPHY — Families
     ============================================================ */
  --font-logo:    'Cinzel', 'Times New Roman', serif;
  --font-display: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ============================================================
     TYPOGRAPHY — Scale (desktop)
     ============================================================ */
  --fs-hero:        88px;   /* H1 — editorial hero */
  --fs-h1:          64px;
  --fs-h2:          44px;
  --fs-h3:          28px;
  --fs-h4:          20px;
  --fs-lead:        22px;   /* hero subhead, lead paragraph */
  --fs-body:        17px;
  --fs-small:       15px;
  --fs-caption:     13px;
  --fs-micro:       11px;   /* compliance, DRE, copyright */

  --fs-stat-xl:     72px;   /* stat hero numerals */
  --fs-stat-lg:     52px;
  --fs-stat-md:     36px;

  --fs-wordmark-lg: 36px;
  --fs-wordmark-md: 22px;
  --fs-wordmark-sm: 14px;

  /* Line heights */
  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-display:     1.15;
  --lh-body:        1.6;
  --lh-relaxed:     1.75;

  /* Letter spacing */
  --tracking-tight:    -0.012em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.16em;
  --tracking-widest:   0.24em;
  --tracking-wordmark: 0.32em;

  /* Weights */
  --w-light:        300;
  --w-regular:      400;
  --w-medium:       500;
  --w-semibold:     600;
  --w-bold:         700;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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:   128px;
  --space-11:   160px;

  /* Section / page rhythm */
  --section-y-desktop: 128px;
  --section-y-tablet:   96px;
  --section-y-mobile:   64px;

  --gutter-desktop:     96px;
  --gutter-tablet:      48px;
  --gutter-mobile:      24px;

  --container-max:      1280px;
  --container-narrow:   880px;
  --container-text:     680px;

  /* ============================================================
     RADII — minimal
     ============================================================ */
  --radius-0:   0px;
  --radius-1:   2px;
  --radius-2:   4px;     /* maximum allowed on most surfaces */
  --radius-card: 0px;    /* cards are sharp-cornered */
  --radius-button: 0px;  /* buttons are sharp-cornered */

  /* ============================================================
     ELEVATION — almost nothing
     ============================================================ */
  --shadow-none: none;
  --shadow-hairline: 0 1px 0 rgba(26, 29, 35, 0.06);
  --shadow-card: 0 1px 0 rgba(26, 29, 35, 0.04);  /* sparingly */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;

  /* ============================================================
     LAYOUT — z-index
     ============================================================ */
  --z-nav:       100;
  --z-overlay:   200;
  --z-modal:     300;
}

/* ============================================================
   MOBILE TYPE SCALE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --fs-hero:    44px;
    --fs-h1:      36px;
    --fs-h2:      28px;
    --fs-h3:      22px;
    --fs-h4:      18px;
    --fs-lead:    18px;
    --fs-body:    16px;
    --fs-stat-xl: 48px;
    --fs-stat-lg: 36px;
  }
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   These map directly onto headings; UI code can also reference
   them as classnames on divs/spans for non-semantic placement.
   ============================================================ */

.swp-wordmark,
.swp-wordmark-primary {
  font-family: var(--font-logo);
  font-weight: var(--w-regular);
  font-size: var(--fs-wordmark-lg);
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
}

.swp-wordmark-secondary {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-wordmark-lg);
  letter-spacing: var(--tracking-widest);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
}

.swp-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.swp-hero {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.swp-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.swp-h3, h3 {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
  margin: 0;
}

.swp-h4, h4 {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
  margin: 0;
}

.swp-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.swp-lead {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.swp-body, p {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0;
}

.swp-small {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.swp-caption {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.swp-meta {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--fg-soft);
}

.swp-micro,
.swp-compliance {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-soft);
}

.swp-stat-xl {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-stat-xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.swp-stat-lg {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-stat-lg);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.swp-stat-data {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  color: var(--data);
}

.swp-quote {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-style: italic;
  font-size: 28px;
  line-height: 1.4;
  color: var(--fg);
}

/* ============================================================
   SIGNATURE FLOURISHES
   ============================================================ */
.swp-bronze-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: middle;
}

.swp-bronze-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--accent);
  border: 0;
}

.swp-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--rule);
  border: 0;
}

/* ============================================================
   BASE RESETS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
a:hover { opacity: 0.7; }