/* ==========================================================================
   Estat.OS — tokens.css
   One set of colours, fonts and spacing for the office screens and the website.
   ---------------------------------------------------------------------------
   RESOLUTION 1 — background confusion (#F9F7F2 vs #fbf9f4)
     These are NOT two versions of one token. They are one token per product:
       * admin (Office app chrome)  -> --estat-app-bg: #fbf9f4   "Linen"
       * public (customer website)  -> --estat-bg:     #F9F7F2   "Paper"
     Rule: never swap. Admin surfaces (#f0eee9 / #f5f3ee / #e4e2dd) never
     appear on the public site; the public site only uses paper + white + sand.
   RESOLUTION 2 — display face
     Source Serif 4 is the ONLY display face for headings.
     --estat-display is emitted to the public site as a token so a
     theme cannot silently substitute another serif.
   ========================================================================== */

:root {
  /* ---- Type families ---------------------------------------------------- */
  --estat-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --estat-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Type scale ------------------------------------------------------- */
  --fs-display: 32px;   /* H1, Source Serif 4, 600, lh 1.18 */
  --fs-h2:      22px;
  --fs-h3:      18px;
  --fs-card:    16px;   /* card title, SS4 600 */
  --fs-name:    14px;   /* inbox name, table name, SS4 500 */
  --fs-body:    13px;   /* Inter UI default */
  --fs-meta:    12px;
  --fs-label:   11px;   /* uppercase, 0.06em, muted */
  --lh-tight:   1.18;
  --lh-ui:      1.45;
  --lh-article: 1.7;    /* single-insight body */

  /* ---- OFFICE SCREEN surfaces ------------------------------------------- */
  --estat-app-bg:  #fbf9f4;   /* page background */
  --estat-panel:   #ffffff;   /* cards, table rows, panels */
  --estat-raised:  #f5f3ee;   /* hover, active row, subnav track */
  --estat-inset:   #f0eee9;   /* inset wells, thumbnails, code */
  --estat-sand:    #e4e2dd;   /* dividers on sand, disabled fill */
  --estat-line:    #E6E2D9;   /* hairline 1px */
  --estat-ink:     #1b1c19;   /* primary text + active tab bg */
  --estat-ink-2:   #444748;   /* secondary text */
  --estat-ink-3:   #6b6a63;   /* muted text, meta (4.8:1 on #fbf9f4) */
  --estat-near:    #1c1b1b;   /* print/preview body copy */
  --estat-accent:  #725b2f;
  /* Status colours — success, warning, error. */
  --estat-positive-soft:  #e6f7ef;
  --estat-positive-strong:#0f6e4b;
  --estat-positive-line:  #c6ead8;
  --estat-warning-soft:   #fdf3e2;
  --estat-warning:        #7a5500;
  --estat-warning-line:   #f5e0b8;
  --estat-danger-deep:    #93000a;
  --estat-danger-line:    #ffb4ab;
  --estat-accent-deep:    #5a4522;
  --estat-line-4:         #d8d4cc;


  /* ---- Added so every colour in the new admin screens comes from one place.
     Without these, admin-new.css had 180 hardcoded values and changing a
     theme colour left the new screens untouched. ---- */
  --estat-muted-2:      #747878;  /* secondary muted text on the new screens */
  --estat-line-3:       #c4c7c7;  /* stronger hairline, table borders */
  --estat-accent-2:     #a68b5b;  /* lighter bronze, chips and rules */
  --estat-positive-deep:#2a4535;  /* dark green, confirmed states */
  --estat-danger-soft:  #ffdad6;  /* error panel fill */
   /* bronze — links, active border, CTA */
  --estat-accent-soft: #f2ede4;
  --estat-positive: #3f6b4f;
  --estat-warn:    #8a6a1f;
  --estat-danger:  #8c3b32;

  /* ---- PUBLIC surfaces -------------------------------------------------- */
  --estat-bg:      #F9F7F2;   /* page background — public */
  --estat-surface: #FFFFFF;   /* cards, panels */
  --estat-sand-2:  #F2EDE4;   /* public accent wells, print blocks */
  --estat-line-2:  #E6E2D9;   /* same hairline value, public name */
  --estat-count-bg: rgba(26,26,26,.78); /* photo count pill, sits on any picture */
  --estat-ink-p:   #1A1A1A;   /* public primary text */
  --estat-ink-p2:  #4A4A45;   /* public secondary */
  --estat-muted:   #5F5E58;   /* public muted, labels (5.6:1 on #F9F7F2) */

  /* ---- Status (shared) -------------------------------------------------- */
  --estat-st-new:       #725b2f;
  --estat-st-contacted: #2f5872;
  --estat-st-scheduled: #6b5a1f;
  --estat-st-won:       #3f6b4f;
  --estat-st-lost:      #8c3b32;

  /* ---- Geometry --------------------------------------------------------- */
  --estat-radius: 2px;
  --estat-hairline: 1px;
  --estat-container: 1240px;
  --estat-gutter: 20px;
  --estat-sidebar: 232px;
  --estat-topbar: 52px;
  --estat-inbox: 380px;
  --estat-media-card: 200px;   /* public card media height */
  --estat-media-project: 120px;
  --estat-thumb: 48px;         /* admin row avatar 48x32 */
  --estat-thumb-h: 32px;
  --estat-dot: 8px;
  --estat-active-border: 3px;  /* left border on active nav / row / tab */

  /* ---- Spacing ---------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

  /* ---- Elevation — hairline only, never a shadow ------------------------ */
  /* Active subnav tab — this token replaces the inline background:#1b1c19 */
  --estat-tab-active-bg: #1b1c19;
  --estat-tab-active-ink: #fbf9f4;
  --estat-tab-track: #f5f3ee;

  --estat-elev: none;
  --estat-focus: 0 0 0 2px #ffffff, 0 0 0 4px #725b2f;
  --estat-focus-inset: inset 0 0 0 2px #725b2f;
}

/* --------------------------------------------------------------------------
   Base primitives
   -------------------------------------------------------------------------- */
.estat-num, .estat-price, table td.is-num, .metric-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.estat-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--estat-muted);
  font-weight: 500;
}

/* Icons are inline SVG from Support\Icon — the plugin ships no icon font.
   One em square, so a component that sets font-size still sets the size,
   exactly as it did when these were glyphs. */
.estat-ms {
  width: 1em;
  height: 1em;
  font-size: 18px;   /* same default the icon font had */
}
.estat-ms.ms-16 { font-size: 16px; }
.estat-ms.ms-20 { font-size: 20px; }

.estat-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Focus: single ring, never removed. Public = accent on paper. */
.estat-public :focus-visible,
.estat-public a:focus-visible,
.estat-public button:focus-visible,
.estat-public input:focus-visible,
.estat-public select:focus-visible,
.estat-public textarea:focus-visible {
  outline: 2px solid var(--estat-accent);
  outline-offset: 2px;
  border-radius: var(--estat-radius);
}
.estat-app :focus-visible {
  outline: 2px solid var(--estat-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   SHARED PRIMITIVES
   tokens.css carries the handful of primitives BOTH products use, so neither
   product stylesheet has to know about the other. Anything product-specific
   stays in public.css or admin.css and wins where it overlaps (they load after
   this file). Neutral tokens only: no admin surface appears on the public site
   and no public surface appears in the office app.
   ========================================================================== */

/* property thumb 48x32 and avatar 48x32/48x48 — no shadow, hairline edge */
.estat-thumb { width: 48px; height: 32px; border-radius: var(--estat-radius); overflow: hidden;
  background: var(--estat-inset); border: var(--estat-hairline) solid var(--estat-line); flex: 0 0 auto; }
.estat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.estat-thumb.is-wide { width: 64px; height: 42px; }
.estat-avatar { width: 48px; height: 32px; border-radius: var(--estat-radius); background: var(--estat-inset);
  border: var(--estat-hairline) solid var(--estat-line); display: grid; place-items: center;
  font-family: var(--estat-ui); font-size: 12px; font-weight: 600; color: var(--estat-accent);
  letter-spacing: .02em; flex: 0 0 auto; overflow: hidden; font-variant-numeric: tabular-nums; }
.estat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.estat-avatar.is-square { width: 48px; height: 48px; font-size: 13px; }

/* stacked list rows */
.estat-list { display: grid; }
.estat-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: var(--estat-hairline) solid var(--estat-line); color: var(--estat-ink-2); }
.estat-list-row:last-child { border-bottom: 0; }
.estat-list-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.estat-list-main b { font-family: var(--estat-display); font-size: 14px; font-weight: 500;
  color: var(--estat-ink); display: block; line-height: 1.3; }
.estat-list-main span { font-size: 12px; color: var(--estat-ink-3); }
.estat-list-row .estat-ms { color: var(--estat-ink-3); }

/* meta line under a title */
.estat-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--estat-ink-3); }

/* drag handle */
.estat-grip { color: var(--estat-ink-3); cursor: grab; }

/* small helpers used by both products */
.estat-strong { font-weight: 600; color: var(--estat-ink); }
.estat-muted { color: var(--estat-ink-3); }
.estat-ink-3 { color: var(--estat-ink-3); }
.estat-help { font-size: 12px; color: var(--estat-ink-3); }
.estat-card-meta b, .estat-help b { color: var(--estat-ink); font-weight: 600; }


/*
 * Dark theme.
 *
 * Settings -> Appearance has offered "Dark" for a while, but nothing in the
 * stylesheets listened to it, so choosing it changed nothing. Every colour now
 * comes from a token, so this one block is enough.
 */
.estat-theme-dark,
.estat-theme-dark .estat-new-ui {
  --estat-app-bg:  #16171a;
  --estat-panel:   #1e1f23;
  --estat-raised:  #26282d;
  --estat-inset:   #2b2d33;
  --estat-sand:    #34363c;
  --estat-sand-2:  #2b2d33;
  --estat-line:    #35373d;
  --estat-line-2:  #35373d;
  --estat-line-3:  #45484f;
  --estat-line-4:  #45484f;
  --estat-ink:     #f2f0ec;
  --estat-ink-2:   #cfcdc7;
  --estat-ink-3:   #a7a49d;
  --estat-muted:   #a7a49d;
  --estat-muted-2: #9b9891;
  --estat-ink-p:   #f2f0ec;
  --estat-ink-p2:  #cfcdc7;
  --estat-accent:  #c8a76a;
  --estat-accent-soft: #2e2a22;
  --estat-positive: #7fb894;
  --estat-positive-soft: #1c2b23;
  --estat-positive-line: #2f4a3b;
  --estat-danger:  #e79b93;
  --estat-danger-soft: #3a2220;
  --estat-danger-line: #5c3a36;
  --estat-focus: 0 0 0 2px #16171a, 0 0 0 4px #c8a76a;
}

@media (prefers-color-scheme: dark) {
  .estat-theme-auto {
    --estat-app-bg: #16171a;
    --estat-panel:  #1e1f23;
    --estat-raised: #26282d;
    --estat-inset:  #2b2d33;
    --estat-sand:   #34363c;
    --estat-line:   #35373d;
    --estat-ink:    #f2f0ec;
    --estat-ink-2:  #cfcdc7;
    --estat-ink-3:  #a7a49d;
    --estat-accent: #c8a76a;
  }
}

/*
 * Older screen styles still ask for these names. Rather than let them fall back
 * to nothing, they are mapped here — so colours, sizes and spacing still come
 * from one place.
 */
:root {
  /* Body and heading sizes. */
  --estat-text:      14px;
  --estat-text-xs:   11px;
  --estat-text-sm:   12px;
  --estat-text-md:   13px;
  --estat-text-lg:   15px;
  --estat-text-xl:   18px;
  --estat-text-2xl:  22px;

  /* Spacing scale. */
  --estat-gap:       12px;
  --estat-gap-xs:     4px;
  --estat-gap-sm:     8px;
  --estat-gap-md:    12px;
  --estat-gap-lg:    16px;
  --estat-gap-xl:    24px;

  /* Line height. */
  --estat-leading:       1.55;
  --estat-leading-tight: 1.25;

  /* Everyday words for states. */
  --estat-good:      var(--estat-positive);
  --estat-good-soft: var(--estat-positive-soft);
  --estat-warn-soft: var(--estat-warning-soft);

  /* Focus ring, drawn from the hairline colour. */
  --estat-ring: 0 0 0 2px var(--estat-line-4);
}