/* =============================================================================
   PRIMITIVES — the raw token layer.
   -----------------------------------------------------------------------------
   THIS IS THE ONLY FILE IN THE PROJECT ALLOWED TO CONTAIN RAW VALUES
   (hex colors, px, rem, rgba, font stacks). Everything else — semantic.css,
   components.css, app.css, and every screen — must reference tokens, never
   literals. The token lint (scripts/lint-tokens.mjs) enforces this and exempts
   only this file.

   Primitives are intentionally meaning-free: a palette + numeric scales. They
   answer "what values exist", not "what they're for". The `--p-` prefix marks
   a value as primitive — components must NOT use `--p-*` directly; they consume
   the intent/semantic names in semantic.css. Add a value HERE first, then alias
   it in semantic.css, then use the token.

   BRAND: TrueUp — Stiles Property Management. One accent (Crimson), a dark
   Slate, Ink text on Paper, Mist/Cloud neutrals, White surfaces. Square corners
   everywhere (radius 0). Baskerville display + Proxima Nova body. Green appears
   only as a sparing "file uploaded ✓" confirmation.
   ========================================================================== */
:root {
  /* ── Palette ─────────────────────────────────────────────────────────────
     Crimson is the sole accent (CTAs, links, active/selected, accent bars).
     Slate carries dark bands, table headers, the nav mark, statement rules and
     the "credit" figure. Ink is body text; Paper is the canvas; Mist/Cloud are
     borders + muted chrome; White is surfaces. Green = success only. */

  /* Accent — Crimson */
  --p-crimson:        #B41F24;
  --p-crimson-hover:  #9A1A1E;
  --p-crimson-light:  #E8595E;                     /* accent on dark / reversed mark */
  --p-crimson-06:     rgba(180, 31, 36, 0.06);   /* subtle fills, divergent row  */
  --p-crimson-12:     rgba(180, 31, 36, 0.12);   /* divergent row-header, border */
  --p-crimson-26:     rgba(180, 31, 36, 0.26);   /* find-match wash over a page image */
  --p-crimson-50:     rgba(180, 31, 36, 0.50);   /* its edge, so a thin mark still reads */

  /* Slate — dark surface / headings rule / credit */
  --p-slate:          #1F3841;
  --p-slate-mid:      #4A6B75;                     /* stacking-plan horizon ramp   */
  --p-slate-light:    #7E969E;                     /* stacking-plan horizon ramp   */
  --p-slate-12:       rgba(31, 56, 65, 0.12);     /* soft statement shadow        */
  --p-scrim:          rgba(20, 23, 27, 0.55);     /* modal / lightbox backdrop    */

  /* Ink — body text, with alpha tints for hierarchy */
  --p-ink:            #222222;
  --p-ink-72:         rgba(34, 34, 34, 0.72);     /* secondary / body             */
  --p-ink-55:         rgba(34, 34, 34, 0.55);     /* muted / subtle               */

  /* Neutrals */
  --p-paper:          #FAF9F5;                     /* canvas, subtle fills         */
  --p-mist:           #C4C6C6;                     /* borders, dividers, muted     */
  --p-cloud:          #EFEFEF;                     /* hairline rows, muted chips   */
  --p-white:          #FFFFFF;                     /* cards, surfaces              */

  /* Success — green, used sparingly (upload confirmation only) */
  --p-green:          #1F8A5B;
  --p-green-12:       rgba(31, 138, 91, 0.12);
  --p-green-30:       rgba(31, 138, 91, 0.30);

  /* ── Spacing scale (token name = px at a 16px root) ──────────────────────── */
  --p-space-0:   0;
  --p-space-1:   0.0625rem;  /* 1px  */
  --p-space-2:   0.125rem;   /* 2px  */
  --p-space-4:   0.25rem;    /* 4px  */
  --p-space-6:   0.375rem;   /* 6px  */
  --p-space-8:   0.5rem;     /* 8px  */
  --p-space-10:  0.625rem;   /* 10px */
  --p-space-12:  0.75rem;    /* 12px */
  --p-space-14:  0.875rem;   /* 14px */
  --p-space-16:  1rem;       /* 16px */
  --p-space-20:  1.25rem;    /* 20px */
  --p-space-24:  1.5rem;     /* 24px */
  --p-space-28:  1.75rem;    /* 28px */
  --p-space-32:  2rem;       /* 32px */
  --p-space-36:  2.25rem;    /* 36px */
  --p-space-40:  2.5rem;     /* 40px */
  --p-space-44:  2.75rem;    /* 44px */
  --p-space-48:  3rem;       /* 48px */
  --p-space-64:  4rem;       /* 64px */

  /* ── Radii ───────────────────────────────────────────────────────────────────
     BRAND: square corners are the signature. Every radius resolves to 0 — the
     scale names are kept only so existing token references still parse. */
  --p-radius-xs:     0;
  --p-radius-sm:     0;
  --p-radius-md:     0;
  --p-radius-lg:     0;
  --p-radius-xl:     0;
  --p-radius-2xl:    0;
  --p-radius-3xl:    0;
  --p-radius-pill:   0;
  --p-radius-full:   0;
  --p-radius-circle: 0;

  /* ── Type scale (token name = px at a 16px root) ─────────────────────────── */
  --p-text-7:       0.4375rem; /* 7px — micro labels inside SVG */
  --p-text-11:      0.6875rem;
  --p-text-12:      0.75rem;
  --p-text-13:      0.8125rem;
  --p-text-14:      0.875rem;
  --p-text-15:      0.9375rem;
  --p-text-16:      1rem;
  --p-text-18:      1.125rem;
  --p-text-20:      1.25rem;
  --p-text-24:      1.5rem;
  /* Editorial display: screen H1 range clamp(34px … 52px). */
  --p-text-display: clamp(2.125rem, 5vw, 3.25rem);

  /* Weights: body Proxima 300, titles Baskerville 400, eyebrows/buttons 600. */
  --p-weight-light:    300;
  --p-weight-regular:  400;
  --p-weight-medium:   500;
  --p-weight-semibold: 600;
  --p-weight-bold:     700;

  --p-tracking-tighter: -0.02em;
  --p-tracking-1:        0.01em;
  --p-tracking-2:        0.02em;
  --p-tracking-4:        0.04em;
  --p-tracking-5:        0.05em;
  --p-tracking-6:        0.06em;
  --p-tracking-8:        0.08em;

  /* Font stacks. Adobe Fonts names come first ("baskervville"/"proxima-nova");
     the Google-Fonts substitutes wired in index.html (Libre Baskerville /
     Montserrat) hold the layout until the real Typekit kit is loaded — metrics
     are close. See docs / README handoff. */
  --p-font-serif: "Baskerville", "baskerville-display-pt", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --p-font-sans:  "proxima-nova", "Proxima Nova", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --p-font-mono:  ui-monospace, Menlo, monospace;

  /* ── Shadows ─────────────────────────────────────────────────────────────────
     BRAND: cards carry a 1px Mist hairline, not a drop shadow. We express that
     hairline as a square box-shadow ring so the many existing `box-shadow:
     var(--shadow-*)` card rules pick up the border look with no markup churn.
     The printable statement sheet is the one real (soft Slate) shadow. */
  --p-shadow-sm:        0 0 0 1px #C4C6C6;                 /* mist hairline ring   */
  --p-shadow-md:        0 0 0 1px #C4C6C6;                 /* mist hairline ring   */
  --p-shadow-lg:        0 0 0 1px #C4C6C6;                 /* mist hairline ring   */
  --p-shadow-raised:    0 1px 20px rgba(31, 56, 65, 0.12); /* statement sheet      */
  --p-shadow-statement: 0 1px 20px rgba(31, 56, 65, 0.12);
  --p-shadow-hover:     0 0 0 1px #B41F24;                 /* crimson hairline     */
  --p-shadow-focus:     0 0 0 3px rgba(180, 31, 36, 0.18); /* crimson focus ring   */

  /* ── Border widths ───────────────────────────────────────────────────────── */
  --p-border-hairline: 1px;
  --p-border-thin:     1px;
  --p-border-thick:    2px;
  --p-border-accent:   3px;
  --p-border-bar:      4px;

  /* ── Redesign (theme-new) additive primitives ────────────────────────────────
     New raw values the "new" UI (styles/theme-new.css, scoped to
     html[data-ui="new"]) needs. ADDITIVE ONLY — no existing primitive is
     changed, so the current UI is byte-identical. Values taken verbatim from the
     design handoff's primitives.css. See docs/design-package-brief.md. */
  --p-text-10:      0.625rem;   /* 10px — eyebrow / uppercase micro-label */
  --p-text-22:      1.375rem;
  --p-text-30:      1.875rem;
  --p-text-32:      2rem;
  --p-space-18:  1.125rem;   /* 18px — dense list-row vertical rhythm */
  --p-space-22:  1.375rem;   /* 22px */
  --p-space-26:  1.625rem;   /* 26px */
  --p-tracking-tight:   -0.01em;
  --p-tracking-10:       0.10em;
  --p-on-dark-75:     rgba(255, 255, 255, 0.75); /* body ink on a Slate band */
  --p-size-320:       320px;   /* card min-width — lease-intelligence grid track */
  --p-size-232:       232px;   /* tile min-width — property-hub inventory grid track */
  --p-size-440:       440px;   /* prose-in-a-table max — the lease-clause cell in a promotion diff */
  --p-size-680:       680px;   /* comfortable reading measure for a page of prose — the glossary */
  --p-size-150:       150px;   /* stat-tile min-width — the Admin data-quality summary grid */
  --p-size-72:        72px;    /* sticky nav height — what a sticky element below it must clear */
  --p-size-53:        53px;    /* sticky nav height at phone widths (measured, one row) */
  --p-size-560:       560px;   /* per-lease fact grid min-width — four columns at their natural size */
  --p-size-0:          0px;    /* a zero LENGTH — `--p-space-0` is unitless and cannot be added in calc() */
  --p-size-44:        44px;    /* the guided-flow rail's own height — a sticky band under the nav */
  --p-size-38:        38px;    /* the guided-flow rail at phone widths */
  --p-size-crumb:     53px;    /* the "back to the property" crumb band — MEASURED (8 + 29 + 8 + 8), not
                                  estimated, and held there by a test: a sticky element clears it by token */
  --p-size-26:        26px;    /* a step dot on the guided-flow rail */
  --p-size-22:        22px;    /* a step dot at phone widths */
  --p-size-14:        14px;    /* the hairline connector BETWEEN two step dots */

  /* Device safe areas (notch / Dynamic Island / home indicator). These resolve to 0 in a
     browser tab and only become non-zero in the installed PWA, which is served
     viewport-fit=cover. Primitives, because env() is the raw platform value. */
  --p-safe-top:      env(safe-area-inset-top, 0px);
  --p-safe-right:    env(safe-area-inset-right, 0px);
  --p-safe-bottom:   env(safe-area-inset-bottom, 0px);
  --p-safe-left:     env(safe-area-inset-left, 0px);
}