/* tokens.css — Prime Real Estate Consultants =============================
   Every design decision on this site is a variable in this file. Change a
   colour, size or spacing step HERE and it updates everywhere. Do not
   hard-code colours or font sizes in the other two files, or in a page.
   Load order on every page:  tokens.css -> base.css -> components.css

   AUDIENCE: homeowners in foreclosure, mostly 60+, often on a phone, often
   anxious. Everything is sized and contrasted for someone reading without
   their glasses. When in doubt: bigger and higher contrast, never smaller.

   IDIOM (added at the hybrid build): the established law-office website
   convention — dark utility bar with an oversized phone, cream masthead,
   dark navy nav band, navy photographic hero, centred section headings over
   short brass rules. The BRASS RAMP in section 1 is what carries that idiom.
   Brass is an ACCENT: a rule, a border, a small mark, one button. It is
   never a large field and it is never a bright yellow.

   EVERY colour pair below states its MEASURED WCAG contrast ratio. AA needs
   4.5:1 for body text and 3:1 for large text (24px+) and UI borders. If you
   change a colour, re-measure it. Never ship a pair below its stated minimum.
   ========================================================================= */

:root {

  /* 1. RAW PALETTE ------------------------------------------------------
     Named by hue + lightness. Do not use these directly in components —
     use the SEMANTIC tokens in section 2. These exist so the semantic
     tokens have somewhere to point. */

  /* Navy — the brand anchor. #0a1551 is the existing brand navy. */
  --navy-900: #060d33;  /* deepest — nav band, hero, footer, disclaimer bar */
  --navy-800: #0a1551;  /* BRAND NAVY — utility bar, headings, solid buttons */
  --navy-700: #16256f;  /* links, hover states */
  --navy-600: #24378c;  /* active / pressed states */
  --navy-400: #7f8ab5;  /* decorative only — too light for text on paper */
  --navy-200: #c9cfe4;  /* borders + secondary text ON navy backgrounds */
  --navy-100: #e6eaf4;  /* tinted panel */
  --navy-050: #eef1f8;  /* lightest tint — info callout background */
  --navy-950: #04091f;  /* footer legal bar only — one shade below navy-900 */

  /* Neutrals. Two families, the way good print works: a WARM PAPER stock and
     a COOL, navy-tinted INK on top of it. Never pure black, never a flat
     untinted grey — both read as machine-generated. */

  /* Paper family — warm, so large light areas do not glare for older eyes. */
  --paper:      #faf8f5;  /* page background */
  --paper-sunk: #f2efe9;  /* alternate band, to separate long sections */
  --white:      #ffffff;  /* card / field / table surface */

  /* Ink family — every step tinted toward the brand navy. */
  --ink-900:  #0d141a;  /* near-black body text */
  --grey-700: #333c48;  /* secondary body text */
  --grey-600: #545e6c;  /* muted / caption text */
  --grey-400: #7d8593;  /* STRONG border — the lightest border allowed around
                           a real UI boundary such as an input */
  --grey-300: #c2c7d0;  /* decorative divider only */
  --grey-200: #dcdfe5;  /* hairline / table rules — decorative only */

  /* BRASS — the law-office accent. Antique and muted, never a bright gold.
     FOUR STEPS, EACH BOUND TO ONE GROUND. This is the single most important
     rule in this file, because brass is the colour most likely to be misused:

       --brass-300  TEXT on DARK only     (on paper 1.72:1 — never on paper)
       --brass-500  RULES on DARK only    (on paper 2.88:1 — never on paper)
       --brass-600  RULES on LIGHT only   (4.74:1 — a rule, not text)
       --brass-700  TEXT on LIGHT, and the fill of the one brass button
       --brass-800  the hover fill of that button, nothing else            */
  --brass-300: #d9bd7a;  /* on navy-900 10.34:1 · navy-800 9.29:1 · navy-950 10.82:1  AA+ */
  --brass-500: #b98c3e;  /* on navy-900  6.18:1 · navy-800 5.56:1 · navy-950  6.47:1  (UI 3:1) */
  --brass-600: #8a6a2f;  /* on paper 4.74:1 · sunk 4.37:1 · white 5.02:1  (UI 3:1) */
  --brass-700: #7a5a1e;  /* on paper 5.99:1 · sunk 5.53:1 · white 6.35:1  AA
                            and: white ON brass-700 6.35:1  AA  (the CTA button) */
  --brass-800: #63490f;  /* white ON brass-800 8.43:1  AA+  (that button, hovered) */
  /* navy-900 ON brass-500 is 6.18:1 — that is the .btn--outline-dark hover. */

  /* Red — RESERVED. Genuine urgency only: sale-date callouts, form errors.
     NEVER a large background field. See "THE RED RULE" below. */
  --red-500:  #f23a3c;  /* BRAND RED — 6px rules and icons only */
  --red-700:  #b3161d;  /* the only red allowed for TEXT */
  --red-900:  #8f1116;  /* dark red, if white-on-red is ever unavoidable */
  --red-050:  #fdecec;  /* pale tint — urgent callout background */

  /* Green — reassurance: "included", "completed", success messages. */
  --green-500: #31a050; /* BRAND GREEN — icons, borders, checkmarks */
  --green-700: #1e6b34; /* the only green allowed for TEXT */
  --green-050: #eaf5ed;

  /* Amber — caution, "read this before you act". */
  --amber-700: #6b4a06;
  --amber-050: #fbf1d8;

  /* 2. SEMANTIC COLOUR TOKENS -------------------------------------------
     What components actually use. The number beside each is the MEASURED
     WCAG contrast ratio for that pair. */

  --color-bg:              var(--paper);      /* page background */
  --color-surface:         var(--white);      /* cards, fields, tables */
  --color-surface-sunk:    var(--paper-sunk); /* alternate band */

  /* Dark grounds. Three of them, so the chrome can stack without any two
     adjacent bars being the same navy. */
  --color-bg-dark:         var(--navy-900); /* nav band, hero, footer, disclaimer */
  --color-bg-dark-alt:     var(--navy-800); /* utility bar, office panel, offer panel */
  --color-bg-dark-deep:    var(--navy-950); /* footer legal bar only */

  --color-text:            var(--ink-900);  /* on bg 17.5:1 · surface 18.6:1 */
  --color-text-strong:     var(--navy-800); /* on bg 16.0:1  AA+ */
  --color-text-muted:      var(--grey-600); /* on bg  6.2:1 · sunk 5.7:1  AA */
  --color-text-inverse:    var(--white);    /* on navy-800 17.0:1 · navy-900 18.9:1 */
  --color-text-inverse-muted: var(--navy-200); /* on navy-900 12.2:1 · navy-800 10.9:1  AA+ */

  --color-accent:          var(--navy-800); /* solid buttons, header ground */
  --color-accent-hover:    var(--navy-700);
  --color-link:            var(--navy-700); /* on bg 13.0:1  AA+ */
  --color-link-hover:      var(--navy-600);

  /* BRASS, semantically. Read the name, not the number: "-on-dark" tokens
     may ONLY be used over navy, "-on-light" tokens ONLY over paper/white. */
  --color-brass-text-on-dark:  var(--brass-300); /* on navy-900 10.3:1  AA+ */
  --color-brass-rule-on-dark:  var(--brass-500); /* on navy-900  6.2:1  (UI 3:1) */
  --color-brass-rule-on-light: var(--brass-600); /* on paper     4.7:1  (UI 3:1) */
  --color-brass-text-on-light: var(--brass-700); /* on paper     6.0:1  AA */
  --color-cta:             var(--brass-700);     /* white on it  6.4:1  AA */
  --color-cta-hover:       var(--brass-800);     /* white on it  8.4:1  AA+ */

  --color-border:          var(--grey-400); /* on bg  3.5:1  AA (UI 3:1) */
  --color-border-strong:   var(--navy-800); /* on bg 16.0:1  AA+ */
  --color-border-hairline: var(--grey-200); /* 1.3:1 DECORATIVE ONLY — never
                                               the only thing marking a
                                               control or an input */
  --color-border-on-dark:  var(--brass-500); /* on navy-900 6.2:1  (UI 3:1) */

  /* Focus: navy ring on light surfaces, white ring on navy surfaces. Both
     drawn with a 2px offset so it reads as a ring, not a fatter border. */
  --color-focus:           var(--navy-800); /* on bg 16.0:1  AA+ */
  --color-focus-inverse:   var(--white);    /* on navy-900 18.9:1  AA+ */

  /* Danger. Red TEXT is always --red-700, never --red-500. */
  --color-danger:          var(--red-500);  /* 6px rules + icons, 3.6:1 on paper */
  --color-danger-text:     var(--red-700);  /* on bg 6.5:1 · red-050 6.0:1 */
  --color-danger-bg:       var(--red-050);  /* ink-900 on it 16.2:1 */
  --color-danger-deep:     var(--red-900);  /* white on it 9.3:1 — last resort */

  --color-success:         var(--green-500);/* 3.4:1 on white — icons/borders only */
  --color-success-text:    var(--green-700);/* on bg 6.2:1 · green-050 5.9:1  AA */
  --color-success-bg:      var(--green-050);

  --color-warn-text:       var(--amber-700);/* on amber-050 7.2:1  AA */
  --color-warn-bg:         var(--amber-050);
  --color-info-text:       var(--navy-800); /* on navy-050 15.0:1  AA+ */
  --color-info-bg:         var(--navy-050);

  /* THE RED RULE, in one line so nobody misses it: red may be a 6px edge,
     an icon, or dark text. It may never be the background of a block
     larger than a single line of text. On this site red appears in exactly
     two places — the sale-date urgency callout, and form errors. */

  /* THE BRASS RULE, likewise: brass is a rule, a border, a small mark, or
     the single "Order the $350 Foreclosure Audit" button. It is never a
     page-sized field, never a heading colour on paper, never a gradient. */

  /* Static weave for navy fields. A 1px diagonal hairline at 3% white — it
     keeps a large navy band from reading as flat digital fill, costs no
     image request, and does not move. Not a gradient used as decoration. */
  --navy-weave: repeating-linear-gradient(135deg,
                  rgba(255, 255, 255, 0.030) 0 1px, transparent 1px 6px);

  /* 3. TYPOGRAPHY -------------------------------------------------------
     Merriweather (serif) for headings only; it is linked in the HTML
     <head>, never @import-ed here. System sans for body — already on the
     reader's machine, so it paints instantly and respects their OS text
     settings. */

  --font-heading: "Merriweather", Georgia, "Times New Roman", Times, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale: clamp(min, preferred, max), growing between a 360px phone
     and a 1280px desktop. BODY NEVER GOES BELOW 19px. */
  --text-xs:   clamp(1.0625rem, 1.03rem + 0.11vw, 1.125rem);  /* 17 -> 18 */
  --text-sm:   clamp(1.125rem,  1.10rem + 0.11vw, 1.1875rem); /* 18 -> 19 */
  --text-base: clamp(1.1875rem, 1.14rem + 0.22vw, 1.3125rem); /* 19 -> 21 */
  --text-lg:   clamp(1.3125rem, 1.24rem + 0.33vw, 1.5rem);    /* 21 -> 24 */
  --text-xl:   clamp(1.5rem,    1.39rem + 0.43vw, 1.75rem);   /* 24 -> 28 */
  --text-2xl:  clamp(1.75rem,   1.58rem + 0.65vw, 2.125rem);  /* 28 -> 34 */
  --text-3xl:  clamp(2rem,      1.73rem + 1.09vw, 2.625rem);  /* 32 -> 42 */
  --text-4xl:  clamp(1.875rem,  1.48rem + 1.74vw, 3.25rem);   /* 30 -> 52 */
  /* --text-4xl is the hero heading and nothing else. The 30px floor is
     measured, not guessed: at 34px the approved home-page H1 ran to six lines
     on a 320px screen and pushed the sale-date urgency line below the fold.
     30px keeps it to four, and it is still the largest type on the screen.
     Do not raise this floor without re-measuring the first screen at 320px. */
  /* --text-xs is for labels, legal fine print and table captions ONLY.
     Never set running body copy below --text-base. */

  /* NEW: the utility-bar telephone. It is the largest piece of type in the
     masthead and the single most important control on the site — convention
     item 1 of the law-office idiom. 26px on a phone, 32px on a desktop. */
  --text-phone: clamp(1.625rem, 1.30rem + 1.50vw, 2rem);      /* 26 -> 32 */
  /* NEW: the standalone big phone link inside the contact strip. */
  --text-phone-lg: clamp(1.875rem, 1.48rem + 1.74vw, 2.5rem); /* 30 -> 40 */

  --leading-body:    1.65;  /* body copy minimum — do not reduce */
  --leading-snug:    1.45;  /* intro paragraphs, callouts */
  --leading-heading: 1.25;  /* h1-h4 */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  /* No weights below 400 anywhere. Thin type is unreadable for this audience. */

  --tracking-tight:  -0.01em; /* large headings only */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;  /* small uppercase labels */
  --tracking-caps:   0.06em;  /* the two standing CAPS lines: the nav band's
                                 compliance note and the IMPORTANT NOTICE
                                 label. Caps need extra tracking to stay
                                 legible for a 60+ reader. */

  --measure: 68ch;            /* max line length for body copy */
  --measure-narrow: 52ch;     /* callouts, forms, captions */
  --measure-wide: 82ch;       /* the disclaimer sentence only — it is a fixed
                                 133-character legal string and wrapping it at
                                 68ch costs an extra line on every page */

  /* 4. SPACING — a 4px-based scale. Use these, never arbitrary pixels. */
  --space-3xs: 0.25rem;  /*  4px */
  --space-2xs: 0.5rem;   /*  8px */
  --space-xs:  0.75rem;  /* 12px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  3rem;     /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */

  --section-gap: clamp(3rem, 2rem + 4vw, 5rem);  /* between page sections */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* page side padding */
  --container: 72rem;         /* 1152px — full page width */
  --container-narrow: 46rem;  /*  736px — article / form pages */

  /* 5. SHAPE — small radii. This is a professional office, not an app. */
  --radius-sm: 4px;   /* inputs, badges */
  --radius-md: 6px;   /* buttons, cards */
  --radius-lg: 8px;   /* the largest radius on the site */
  /* There is no pill radius. Do not add one. The one circle on this site is
     the header monogram, which is a circular mark, not a rounded rectangle. */

  --border-hairline: 1px;  /* decorative rules */
  --border-thin:     2px;  /* default control borders */
  --border-thick:    3px;  /* focus ring, brass chrome rules, active states */
  --border-rule:     6px;  /* callout / disclaimer / hero-band left edge */

  /* NEW: the section-heading rule. Convention item 5 of the idiom, and the
     ONLY ornament in this project exempt from "no decorative dividers". */
  --rule-width:  72px;
  --rule-height: 4px;

  /* 6. ELEVATION — barely there. Depth comes from borders, not blur. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(13, 20, 26, 0.08);
  --shadow-md: 0 2px 6px rgba(13, 20, 26, 0.10);
  --shadow-lg: 0 4px 14px rgba(13, 20, 26, 0.12); /* skip-link / open menu */

  /* 7. TARGETS & MOTION */
  --tap-min: 48px;  /* MINIMUM height AND width of anything clickable:
                       buttons, nav links, phone links, fields, checkboxes.
                       No exceptions. */
  --tap-gap: 8px;   /* minimum gap between two adjacent tap targets */
  --transition: 150ms ease;  /* colour changes only — no movement. Disabled
                                under prefers-reduced-motion in base.css. */

  /* 8. Z-INDEX — the whole stack, in one place. */
  --z-base:     0;
  --z-raised:   10;   /* focused input, hovered card */
  --z-sticky:   100;  /* reserved */
  --z-nav:      200;  /* site header + open mobile menu */
  --z-overlay:  300;  /* reserved */
  --z-skiplink: 999;  /* always on top */
}