/* ==========================================================================
   Brand layer — T-25.

   This file holds every visual brand decision: colour, typography, spacing
   rhythm and elevation. It is the ONLY file that needs to change to reskin
   the site.

   Nothing durable carries the product name: no filename, directory, class
   name or id in this repository contains it. User-visible name strings live
   in the HTML and are enumerated in BRAND.md, because a site with no build
   step has no template layer to hold them.

   ---------------------------------------------------------------------------
   The style is editorial serif: warm ivory ground, rich black text, a single
   burnished-gold accent, and thin rules doing the structural work that boxes
   and shadows usually do.

   Light only, deliberately. Warm ivory is the substance of this aesthetic,
   not a default — a dark rendering of it would be a different design wearing
   the same typefaces. There is no dark palette to fall back to, so `body`
   paints its ground explicitly.
   ========================================================================== */

:root {

  /* -- surfaces ---------------------------------------------------------
     Ivory rather than white. The distinction is small per-pixel and large
     in aggregate: it is what stops the page reading as a blank document.  */
  --background:  #FAFAF8;   /* the canvas */
  --card:        #FFFFFF;   /* pure white, so cards lift off the ivory */
  --muted:       #F5F3F0;   /* secondary surfaces, warmer still */

  /* -- ink --------------------------------------------------------------- */
  --foreground:      #1A1A1A;  /* rich black, never #000 */
  --muted-foreground:#6B6B6B;  /* secondary text, warm gray */
  --subtle:          #8C8781;  /* captions and meta, one step further back */

  /* -- rules -------------------------------------------------------------
     The rule line is the load-bearing structural element of this style.
     Warm gray, never neutral, or it reads as a wireframe.                 */
  --border:       #E8E4DF;
  --border-hover: #D8D2CA;

  /* -- accent: burnished gold --------------------------------------------
     One accent, used sparingly. Gold leaf in an illuminated manuscript,
     the gilt edge of a book — warmth and distinction without colour noise. */
  --accent:            #B8860B;
  --accent-secondary:  #D4A84B;  /* hover, gradients */
  --accent-foreground: #FFFFFF;
  --accent-muted:      #FBF6EA;  /* 6% wash for featured surfaces */
  --ring:              #B8860B;

  /* -- semantic: EU jurisdiction -----------------------------------------
     Retained deliberately, and the one place a second colour is allowed.
     This green is not decoration — it carries meaning, and it is the same
     value used by rootmail-docs/public/where-rootmail-runs.html, so the
     jurisdiction claim reads identically wherever it appears. Restricted to
     factual jurisdiction markers; never a button, never a heading.        */
  --eu:      #1F6F5C;
  --eu-soft: #E9F1ED;   /* warmed toward the ivory ground */

  /* -- typography --------------------------------------------------------
     Playfair Display is the soul of this style: high stroke contrast, ball
     terminals, classical proportion. Source Sans 3 carries the reading
     without competing. IBM Plex Mono does small caps and data.            */
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -- elevation ---------------------------------------------------------
     Refinement, not depth. Nothing here should read as a floating panel.  */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, .04);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, .06);
  --shadow-lg: 0 8px 24px rgba(26, 26, 26, .08);
  --shadow-accent: 0 4px 14px rgba(184, 134, 11, .18);

  /* -- rhythm ------------------------------------------------------------
     Generous by intent. The whitespace is an active element, not leftover. */
  --section:      8.5rem;   /* vertical padding between major sections */
  --section-tight:5.5rem;
  --measure:      38rem;    /* reading column */
  --wrap:         64rem;    /* outer container */
  --radius:       6px;
  --radius-lg:    8px;

  /* -- motion ------------------------------------------------------------
     Restrained. Nothing bounces, nothing overshoots.                      */
  --ease: cubic-bezier(.22, .61, .36, 1);
}