/*
 * ARA design tokens.
 *
 * Matched to americanrea.org by sampling the live site, not by description:
 * masthead #405C4D, near-black page, #82E072 brand green from the logo file,
 * near-white body text, and solid green square CTAs carrying dark text.
 *
 * The masthead carries AREA's forest green; the working surface below it is
 * white. A listing service is read for hours at a time and is mostly dense
 * tabular data — photos, prices, addresses — which reads better on paper. So
 * the brand lives in the header band and the work happens on white beneath it.
 *
 * The constraint that shapes everything: #82E072 on white is ~1.8:1, so green
 * never carries text on a light ground. It is a FIELD you put dark text on —
 * exactly how the logo and AREA's own buttons use it.
 */

@layer tokens {
  :root {
    /* --- Brand ---------------------------------------------------------- */
    --ara-green: #82e072;        /* the logo mark; fields and marks, never text */
    --ara-green-deep: #2f7d24;   /* 5.2:1 on white — interactive text */
    --ara-green-wash: #eef9eb;   /* panel tint */
    --ara-green-edge: #cbeec1;
    --ara-on-green: #16211a;     /* text ON green. Never theme-flipped. */

    /* The masthead green, sampled from americanrea.org's header. */
    --ara-forest: #405c4d;
    --ara-on-forest: #f9fafe;

    /* --- Ink ------------------------------------------------------------ */
    --ara-ink: #14201a;          /* headings */
    --ara-ink-body: #44534a;     /* the wordmark colour, carried into body copy */
    --ara-ink-mute: #6f7d74;

    /* --- Ground --------------------------------------------------------- */
    --ara-paper: #ffffff;        /* light surfaces: forms, filter panels */
    --ara-paper-tint: #ffffff;   /* the page itself */
    /* Tiles are dark on the white page — the inversion is what makes a row of
     * listings read as objects sitting on the page rather than as ruled lines. */
    --ara-surface-dark: #16191a;
    --ara-line: #e0e7dd;
    --ara-line-strong: #bccab6;

    --status-active: var(--ara-green);
    --status-coming: #b9ecad;
    --status-pending: #e0a33a;
    --status-closed: #5a6b7a;
    --status-off: #aab4a8;

    /* --- Type ----------------------------------------------------------- */
    /* AREA sets everything in a heavy geometric sans — no serif anywhere on
     * their site. Poppins is the closest widely-available match to their
     * headline face. Plex Mono stays for identifiers: an MLS number is read
     * aloud between agents, so it is set as data, not prose. */
    --font-display: 'Poppins', 'Trebuchet MS', system-ui, sans-serif;
    --font-ui: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-data: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

    --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
    --step-0: clamp(0.9rem, 0.87rem + 0.15vw, 0.97rem);
    --step-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
    --step-2: clamp(1.45rem, 1.32rem + 0.65vw, 1.85rem);
    --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
    --step-4: clamp(3rem, 2.3rem + 3.5vw, 5.5rem);

    --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;

    /* AREA's buttons and logo panel are hard rectangles. Rounding them would
     * read as a different brand. */
    --radius: 0px;
    --radius-field: 0px;

    --shadow-raise: 0 1px 2px rgb(20 32 26 / 0.06), 0 6px 18px rgb(20 32 26 / 0.07);
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur: 180ms;
  }
}

@layer base {
  /*
   * Dark tiles on a white page.
   *
   * Redefining the ink and line tokens ON the tile means every descendant
   * picks up surface-appropriate colours automatically — no markup changes, no
   * per-element overrides, and a new element dropped inside a tile is correct
   * by default. This is the whole reason the palette is expressed as tokens
   * rather than literal colours.
   */
  .match,
  .row,
  .listing,
  .buyer,
  .buyer-match,
  .agent-card {
    background: var(--ara-surface-dark);
    --ara-paper: var(--ara-surface-dark);
    --ara-ink: #f2f6f2;
    --ara-ink-body: #c2ccc4;
    --ara-ink-mute: #8d988f;
    --ara-line: #2b3431;
    --ara-line-strong: #414d47;
    /* On the dark tile the light green finally has the contrast to carry text. */
    --ara-green-deep: #9ceb8e;
    --ara-green-wash: #1d2a1e;
    border-color: #2b3431;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: var(--ara-paper-tint);
    color: var(--ara-ink-body);
    font-family: var(--font-ui);
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ara-ink);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0;
  }

  /* Every number an agent compares to another number is tabular. */
  .num,
  th[data-num],
  td[data-num] {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  a {
    color: var(--ara-green-deep);
    text-underline-offset: 0.2em;
  }

  :focus-visible {
    outline: 2px solid var(--ara-green-deep);
    outline-offset: 2px;
    border-radius: var(--radius);
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}