/**
 * OffMarket — Global design tokens
 * Source: docs/offmarket-brand-audit/04-offmarket-color-source.md
 * Loaded after global.css — remaps legacy --c-* primitives to OFF MARKET palette.
 *
 * OFF MARKET DESIGN SYSTEM
 * All new sections, pages, buttons, forms, cards and simulator UI must use these tokens.
 * Do not create random one-off sizes.
 * Do not create tiny isolated buttons.
 * Preserve existing animations and JS hooks.
 */

:root {
  /* ── Fonts ── */
  --om-font-main: Inter, "DM Sans", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --om-font-heading: var(--font-heading, var(--font-main, var(--om-font-main)));
  --om-font-body: var(--font-body, var(--font-main, var(--om-font-main)));

  /* ── Final OFF MARKET type scale (px — not rem) ── */
  --om-text-caption: 13px;
  --om-text-small: 15px;
  --om-text-body: 17px;
  --om-text-body-lg: 20px;
  --om-text-card-title: 22px;
  --om-text-heading-sm: 28px;
  --om-text-heading: 40px;
  --om-text-heading-lg: 56px;
  --om-text-display: clamp(64px, 6vw, 88px);

  --om-leading-caption: 1.25;
  --om-leading-small: 1.45;
  --om-leading-body: 1.55;
  --om-leading-body-lg: 1.45;
  --om-leading-heading: 1.08;
  --om-leading-display: 0.98;

  --om-tracking-display: -0.065em;
  --om-tracking-heading: -0.055em;
  --om-tracking-body: -0.01em;
  --om-tracking-label: 0.12em;

  /* ── Brand colors ── */
  --om-black: #111111;
  --om-white: #ffffff;
  --om-ruby-950: #565449;
  --om-ruby-800: #565449;
  --om-red: #565449;
  --om-red-hover: #454238;
  --om-accent: #565449;
  --om-primary: #565449;
  --om-red-rgb: 86, 84, 73;
  --om-ivory: #f5f4f2;
  --om-cream: #f1ebeb;
  --om-champagne: #b88a5a;
  --om-sand: #d6c0b1;
  --om-graphite: #2e3430;

  /* Simulator / positive result accent */
  --om-green: #4fd08a;
  --om-green-soft: rgba(79, 208, 138, 0.16);
  --om-green-border: rgba(79, 208, 138, 0.28);
  --om-focus-ring: rgba(79, 208, 138, 0.55);

  /* ── Semantic OFF MARKET tokens (legacy aliases) ── */
  --color-bg-primary: var(--om-ruby-950);
  --color-bg-secondary: var(--om-cream);
  --color-text-primary: var(--om-cream);
  --color-text-muted: var(--om-sand);
  --color-accent: var(--om-champagne);
  --color-accent-light: #c49a6c;
  --color-graphite: var(--om-graphite);
  --color-border-soft: rgba(241, 235, 235, 0.14);
  --color-border-accent: rgba(184, 138, 90, 0.42);
  --color-glass-dark: rgba(86, 84, 73, 0.56);
  --color-glass-dark-strong: rgba(86, 84, 73, 0.72);
  --color-overlay-dark: rgba(86, 84, 73, 0.45);

  /* RGB channels */
  --om-dark-red-rgb: 86, 84, 73;
  --om-deep-red-rgb: 86, 84, 73;
  --om-stone-rgb: 241, 235, 235;
  --om-grey-orange-rgb: 214, 192, 177;
  --om-champagne-rgb: 184, 138, 90;
  --om-champagne-light-rgb: 196, 154, 108;
  --om-graphite-rgb: 46, 52, 48;

  /* ── Active aliases (consume final scale) ── */
  --om-nav: 17px;
  --om-nav-lang: 15px;
  --om-label: var(--om-text-caption);
  --om-body-lg: var(--om-text-body-lg);
  --om-body-md: var(--om-text-body);
  --om-body-sm: var(--om-text-small);
  --om-support-text: var(--om-text-small);
  --om-small-readable: var(--om-text-small);
  --om-meta-readable: var(--om-text-caption);
  --om-letter-tight: var(--om-tracking-display);
  --om-letter-soft: var(--om-tracking-body);
  --om-letter-label: var(--om-tracking-label);

  /* ── Deprecated legacy tokens (aliased — do not use in new CSS) ── */
  --om-title-xl: var(--om-text-display);
  --om-title-lg: var(--om-text-heading-lg);
  --om-title-md: var(--om-text-heading);
  --om-title-sm: var(--om-text-heading-sm);
  --om-h2: var(--om-text-heading-lg);

  /* ── Layout ── */
  --om-container: 1280px;
  --om-section-padding: clamp(6rem, 10vw, 10rem);
  --om-section-padding-sm: clamp(4rem, 7vw, 7rem);
  --om-grid-gap: clamp(1rem, 1.8vw, 1.6rem);

  /* ── Radius ── */
  --om-radius-sm: 1rem;
  --om-radius-md: 1.5rem;
  --om-radius-lg: clamp(2rem, 2.8vw, 3.25rem);
  --om-radius-pill: 999px;

  /* ── Motion ── */
  --om-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --om-duration: 0.28s;

  /* ── Buttons (referenced by om-buttons.css) ── */
  --om-btn-ink: var(--om-ruby-950);
  --om-btn-cream: var(--om-ivory);
  --om-btn-height: 56px;
  --om-btn-padding-x: 30px;
  --om-btn-font-size: 17px;

  /* ── Remap legacy template --c-* → OFF MARKET palette (names kept for compatibility) ── */
  --c-beige-background: #f1ebeb;
  --c-beige-background-rgb: 241, 235, 235;
  --c-beige: #f1ebeb;
  --c-beige-rgb: 241, 235, 235;
  --c-dark-green: #565449;
  --c-dark-green-rgb: 86, 84, 73;
  --c-green: #565449;
  --c-green-rgb: 86, 84, 73;
  --c-light-green: #b88a5a;
  --c-light-green-rgb: 184, 138, 90;
  --c-olive: #c49a6c;
  --c-olive-rgb: 196, 154, 108;
  --c-dark-blue: #2e3430;
  --c-dark-blue-rgb: 46, 52, 48;
  --c-blue: #565449;
  --c-blue-rgb: 86, 84, 73;
  --c-light-blue: #d6c0b1;
  --c-light-blue-rgb: 214, 192, 177;
  --c-sky: #f1ebeb;
  --c-sky-rgb: 241, 235, 235;
  --c-error: #c49a6c;
  --c-error-rgb: 196, 154, 108;

  /* Button hover gradients — OFF MARKET warm accents */
  --c-button-hover-gradient-light: linear-gradient(
    101.51deg,
    rgba(86, 84, 73, 0) 37.02%,
    #565449 308.4%
  );
  --c-button-hover-gradient-dark: linear-gradient(
    91.82deg,
    rgba(184, 138, 90, 0) 20.31%,
    rgba(184, 138, 90, 0.15) 90.77%
  );
}

@media (max-width: 767px) {
  :root {
    --om-text-caption: 13px;
    --om-text-small: 15px;
    --om-text-body: 17px;
    --om-text-body-lg: 18px;
    --om-text-card-title: 20px;
    --om-text-heading-sm: 24px;
    --om-text-heading: 34px;
    --om-text-heading-lg: 42px;
    --om-text-display: clamp(44px, 13vw, 56px);
    --om-btn-font-size: 16px;
  }
}

/* Muted text readability on dark immersive sections */
.ui-dark {
  --t-small: rgba(214, 192, 177, 0.72);
  --t-line: rgba(241, 235, 235, 0.14);
}

/* Muted text on light sections */
.ui-light,
:root {
  --t-small: rgba(46, 52, 48, 0.65);
}