/* ==========================================================================
   FIRM THEME. This file is the only place brand identity lives.
   To re-skin the product for another firm, replace the values in :root and
   the two font stacks. Nothing else in the application references a literal
   colour, font family, or radius.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --brand-green:       #263D3D;   /* Kercher Green */
  --brand-green-deep:  #1B2C2C;   /* pressed / nav shade */
  --brand-green-soft:  #3A5252;   /* hover on green surfaces */
  --brand-gold:        #B09B66;   /* Kercher Gold. Accents only, never body text */
  --brand-gold-deep:   #8C7A4E;   /* gold that is legible on cream when a rule needs weight */
  --brand-cream:       #F8F8F6;
  --brand-white:       #FFFFFF;

  /* ---- Neutrals. Secondary shading and table headings only -------------- */
  --grey-100: #EFEFEC;
  --grey-200: #E2E2DD;
  --grey-300: #CFCFC8;
  --grey-500: #6E736F;
  --grey-700: #4A4F4C;

  /* ---- Status. Red is reserved for errors, warnings, attention ---------- */
  --status-red:      #A02B21;
  --status-red-soft: #FBF0EF;
  --status-ok:       #2F5D46;

  /* ---- Semantic surface + ink ------------------------------------------ */
  --bg:            var(--brand-cream);
  --surface:       var(--brand-white);
  --surface-sunk:  var(--grey-100);
  --nav-bg:        var(--brand-green);
  --nav-ink:       var(--brand-cream);

  --ink:           var(--brand-green);   /* primary text and headings */
  --ink-body:      #23302F;              /* long-form reading ink */
  --ink-muted:     var(--grey-700);
  --ink-on-green:  var(--brand-cream);

  --line:          var(--grey-200);
  --line-strong:   var(--grey-300);
  /* Indicators on light surfaces use the deeper gold, which clears the 3:1 required
     for non-text contrast. The lighter brand gold is reserved for surfaces where it
     sits on green, and for fills that are always paired with a mark or a number. */
  /* Focus and selection must not look alike. Focus is a green ring; selection is a gold
     border plus a filled mark, so the two never have to be told apart by colour alone. */
  --focus:         var(--brand-green);
  --selected:      var(--brand-gold-deep);
  --indicator:     var(--brand-gold-deep);

  /* Three tints derived from the brand. Kept here so a re-skin changes one file. */
  --tint-selected: #F3EEE1;   /* chosen option fill, from gold */
  --tint-hit:      #EDE7D4;   /* search match and cited line, from gold */
  --tint-selection: #D8E0DC;  /* text selection, from green. Distinct from a search hit */

  /* ---- Type ------------------------------------------------------------- */
  --font-read: "Times New Roman", Times, "Liberation Serif", serif;
  --font-ui:   ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Floor is 16px, which is 12pt. Nothing in the product may go below --fs-min. */
  --fs-min:   16px;
  --fs-sm:    16px;
  --fs-base:  17px;
  --fs-read:  18px;   /* Times New Roman runs small, so reading text sits above base */
  --fs-lead:  20px;
  --fs-h3:    19px;
  --fs-h2:    23px;
  --fs-h1:    29px;

  --lh-tight: 1.35;
  --lh-ui:    1.5;
  --lh-read:  1.65;

  /* ---- Space, shape, motion -------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-sm: 3px;  --r-md: 5px;  --r-lg: 8px;
  --shadow-card: 0 1px 2px rgba(38, 61, 61, .06), 0 1px 1px rgba(38, 61, 61, .04);
  --shadow-lift: 0 2px 10px rgba(38, 61, 61, .10);
  --motion: 140ms cubic-bezier(.2, 0, .2, 1);

  --read-measure: 64ch;   /* narrow enough to scan */
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 1ms; }
}