/*
 * SAUERESSIG Group — Design Tokens
 * Version 1.5.1
 * Source of truth: official "Brand Guideline SAUERESSIG" Rev. 1, 01.2026
 *
 * ====================================================================
 * DEFAULTS (use unless brand owner signs off an exception)
 * --------------------------------------------------------------------
 *   Display weight   Avenir Heavy (via --fw-semibold entry point)
 *   Body weight      Avenir Roman 400 (--fw-regular)
 *   Radius           4 px (--radius-md)
 *   Section gap      128 / 96 / 64 (--layout-2xl / -xl / -lg)
 *   Surface          --bg (white); blue/cyan accent only
 *   Type entry       role class only (.sau-h1…h5, .sau-lead, .sau-prod-*)
 *
 * Every other weight, radius, easing and size in this file is permitted
 * by exception — declare the exception in writing or pick the default.
 * See COMPLIANCE.md for the project-launch checklist.
 * ====================================================================
 *
 * Token architecture (3 layers, à la Carbon):
 *   ① CORE      — raw values from the brand book (--sau-blue, --fs-4xl)
 *   ② SEMANTIC  — purpose-named, theme-swappable (--bg, --fg-brand, --focus)
 *   ③ COMPONENT — per-component, derived from semantic (--button-primary-bg)
 *
 * Core palette (Pantone-anchored, do not invent new hues):
 *   SAUERESSIG Blue  — Pantone 300       #005EB8   ← primary brand color
 *   Cyan             — Pantone Process C #009FE3   ← secondary accent
 *   Dark Blue        —                   #002D64   ← depth / dark surfaces
 *   Black            —                   #000000
 *   Dark Grey        — Pantone 431C      #5B6770   ← signature neutral
 *   Light Grey       —                   #E9E9E9
 *
 * Typography (per guideline):
 *   Display / Headings   Avenir LT Std — Heavy (Black for hero moments)
 *   Body / UI            Avenir LT Std  (Light · Book · Roman · Heavy · Black — never italic)
 *   Print fallback       Arial
 *   Logo wordmark        Helvetica (with refined R)
 */

@import url('./fonts/fonts.css');

:root {
  /* ================================================================== */
  /* ① CORE — COLOR (official palette)                                  */
  /* ================================================================== */

  --sau-blue:        #005EB8;   /* SAUERESSIG Blue · Pantone 300 · primary */
  --sau-cyan:        #009FE3;   /* Cyan · Pantone Process Cyan C */
  --sau-dark-blue:   #002D64;   /* Dark Blue */
  --sau-black:       #000000;
  --sau-dark-grey:   #5B6770;   /* Dark Grey · Pantone 431C */
  --sau-light-grey:  #E9E9E9;
  --sau-white:       #FFFFFF;

  /* Working tints derived strictly from the six core colors —
     used for hover, surfaces, dividers. Same hue family, no new colors. */
  --sau-blue-hover:      #00478f;
  --sau-blue-pressed:    #003366;
  --sau-blue-tint-08:    rgba(0, 94, 184, 0.08);
  --sau-blue-tint-04:    rgba(0, 94, 184, 0.04);
  --sau-cyan-hover:      #007fb6;
  --sau-grey-tint:       #f4f5f6;
  --sau-grey-mid:        #b6bcc1;

  /* ================================================================== */
  /* ① CORE — DATA-VIZ PALETTE                                          */
  /* ------------------------------------------------------------------ */
  /* For multi-series charts. Derived from the brand but tuned for      */
  /* categorical distinguishability — never used for UI surfaces or     */
  /* identity, only inside chart frames. 8 hues, sequenced for          */
  /* maximum perceptual separation on a white background.               */
  /* ================================================================== */

  --viz-1:  #002D64;   /* dark blue */
  --viz-2:  #005EB8;   /* sau blue */
  --viz-3:  #009FE3;   /* cyan */
  --viz-4:  #5B6770;   /* dark grey */
  --viz-5:  #6FB7E8;   /* light blue (cyan/white blend) */
  --viz-6:  #00478f;   /* blue-hover */
  --viz-7:  #98A3AB;   /* grey/mid */
  --viz-8:  #BFD7EA;   /* very light cyan */

  /* Sequential ramp — for heatmaps, density. Blue 300 anchor → white. */
  --viz-seq-1: #002D64;
  --viz-seq-2: #00478f;
  --viz-seq-3: #005EB8;
  --viz-seq-4: #4889C9;
  --viz-seq-5: #7FAEDC;
  --viz-seq-6: #BFD7EA;
  --viz-seq-7: #E9E9E9;

  /* ================================================================== */
  /* ② SEMANTIC — COLOR (theme-swappable)                               */
  /* ================================================================== */

  /* Backgrounds */
  --bg:                  var(--sau-white);
  --bg-subtle:           var(--sau-grey-tint);
  --bg-muted:            var(--sau-light-grey);
  --bg-inverse:          var(--sau-black);
  --bg-deep:             var(--sau-dark-blue);
  --bg-brand:            var(--sau-blue);
  --bg-brand-soft:       var(--sau-blue-tint-08);

  /* Foregrounds */
  --fg:                  var(--sau-black);
  --fg1:                 var(--sau-black);
  --fg2:                 var(--sau-dark-grey);
  --fg3:                 var(--sau-grey-mid);
  --fg-inverse:          var(--sau-white);
  --fg-brand:            var(--sau-blue);
  --fg-link:             var(--sau-blue);
  --fg-link-hover:       var(--sau-dark-blue);
  --fg-on-brand:         var(--sau-white);
  --fg-on-deep:          var(--sau-white);

  /* Borders */
  --border:              var(--sau-light-grey);
  --border-strong:       var(--sau-grey-mid);
  --border-subtle:       #f0f1f2;
  --border-brand:        var(--sau-blue);
  --border-inverse:      rgba(255, 255, 255, 0.15);

  /* Status. The DEFAULT status recipe is inside the palette — icon +
     weight + position, coloured info=Cyan, progress=Blue,
     neutral=Dark Grey, emphasis=Dark Blue.

     Green and red are an EXCEPTION layer (marketing-approved 08.2026),
     not the status layer. They are permitted only where the palette
     genuinely cannot carry the meaning:
       --status-error    destructive intent + blocked input — delete /
                         remove / deactivate affordances and their
                         confirm dialogs, validation errors, failed jobs.
       --status-success  confirming an action the user JUST took (toast,
                         post-submit panel), at the moment it happened.

     "Completed" is the normal path, NOT a success event: a finished job,
     a rendered image, a valid field, a selected item, an uploaded file
     are all --status-neutral / --status-progress plus an icon. Never
     green. Neither hue is ever used for category, decoration, charts, or
     brand surfaces. No yellow/amber in any state.
     Full rule: COMPLIANCE.md §2b. Reference implementation:
     mimic-react → frontend/src/lib/status.ts */
  --status-info:         var(--sau-cyan);
  --status-info-bg:      rgba(0, 159, 227, 0.10);
  --status-progress:     var(--sau-blue);
  --status-progress-bg:  var(--sau-blue-tint-08);
  --status-neutral:      var(--sau-dark-grey);
  --status-neutral-bg:   var(--sau-grey-tint);
  --status-emphasis:     var(--sau-dark-blue);
  --status-emphasis-bg:  rgba(0, 45, 100, 0.06);
  --status-success:      #1E8A5C;   /* muted teal-green */
  --status-success-strong:#16704A;  /* hover / borders */
  --status-success-bg:   #ECF6F1;
  --status-error:        #A53A2E;   /* muted brick — never web-safe red */
  --status-error-strong: #842D23;
  --status-error-bg:     #FBEEED;

  /* Focus — accessible at AA against every brand surface (3:1 min).
     The double-ring approach (inset white, outer blue) survives any
     background colour including the brand blue itself. */
  --focus-ring:          var(--sau-blue);
  --focus-ring-inverse:  var(--sau-cyan);
  --focus-shadow:        0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
  --focus-shadow-inverse:0 0 0 2px var(--bg-deep), 0 0 0 4px var(--focus-ring-inverse);
  --focus-shadow-flat:   0 0 0 3px rgba(0, 94, 184, 0.30);

  /* ================================================================== */
  /* ① CORE — TYPOGRAPHY FAMILIES                                       */
  /* ================================================================== */

  --font-display: 'Saueressig Display', 'Avenir LT Std', 'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Saueressig Text', 'Avenir LT Std', 'Avenir Next', Avenir, Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-logo:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;

  /* ================================================================== */
  /* ① CORE — TYPE SCALES                                               */
  /* ------------------------------------------------------------------ */
  /* EXPRESSIVE scale — for marketing, editorial, hero moments.         */
  /* Big jumps, dramatic. Avenir Heavy carries the top end.            */
  /* ================================================================== */

  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.375rem;    /* 22 */
  --fs-xl:   1.75rem;     /* 28 */
  --fs-2xl:  2.25rem;     /* 36 */
  --fs-3xl:  3rem;        /* 48 */
  --fs-4xl:  4rem;        /* 64 */
  --fs-hero: 5.5rem;      /* 88 */

  /* PRODUCTIVE scale — for data-dense UI, tables, dashboards, spec
     sheets. Tighter, smaller ramp, Avenir-driven. Use inside apps and
     operator panels, NEVER for marketing or editorial. */
  --fs-prod-xs:    0.6875rem;  /* 11 — data labels, tags */
  --fs-prod-sm:    0.8125rem;  /* 13 — secondary UI */
  --fs-prod-base:  0.875rem;   /* 14 — body in product surfaces */
  --fs-prod-md:    1rem;       /* 16 — emphasis */
  --fs-prod-lg:    1.125rem;   /* 18 — productive headings */
  --fs-prod-xl:    1.375rem;   /* 22 — page titles in apps */
  --fs-prod-2xl:   1.75rem;    /* 28 — section titles in apps */

  /* Line heights */
  --lh-tight:   1.05; /* @kind font */     /* display only */
  --lh-snug:    1.2; /* @kind font */      /* headings */
  --lh-normal:  1.5; /* @kind font */      /* productive body */
  --lh-relaxed: 1.65; /* @kind font */     /* expressive body */
  --lh-prod:    1.42; /* @kind font */     /* productive body — UI-dense, Carbon-style */

  --ls-tight:   -0.02em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.04em; /* @kind font */
  --ls-caps:    0.14em; /* @kind font */

  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* ================================================================== */
  /* ① CORE — SPACING (4-px base grid)                                  */
  /* ================================================================== */

  --sp-0:  0; /* @kind spacing */
  --sp-1:  0.25rem;   /*   4 */
  --sp-2:  0.5rem;    /*   8 */
  --sp-3:  0.75rem;   /*  12 */
  --sp-4:  1rem;      /*  16 */
  --sp-5:  1.5rem;    /*  24 */
  --sp-6:  2rem;      /*  32 */
  --sp-7:  3rem;      /*  48 */
  --sp-8:  4rem;      /*  64 */
  --sp-9:  6rem;      /*  96 */
  --sp-10: 8rem;      /* 128 */

  /* ================================================================== */
  /* ② SEMANTIC — LAYOUT (separate from spacing)                        */
  /* ------------------------------------------------------------------ */
  /* SPACING tokens live INSIDE a component (padding, gap between       */
  /* sibling items). LAYOUT tokens live BETWEEN components and          */
  /* sections. Splitting them prevents the everyday mistake of using    */
  /* a 96-px gap inside a card.                                         */
  /* ================================================================== */

  --layout-xs:   var(--sp-5);    /*  24 — between tight component pairs */
  --layout-sm:   var(--sp-6);    /*  32 — between related components */
  --layout-md:   var(--sp-7);    /*  48 — between component groups */
  --layout-lg:   var(--sp-8);    /*  64 — between content blocks on a page */
  --layout-xl:   var(--sp-9);    /*  96 — between major page sections */
  --layout-2xl:  var(--sp-10);   /* 128 — between hero and next section */

  /* ================================================================== */
  /* ① CORE — RADII + SHADOWS                                           */
  /* ================================================================== */

  --radius-none: 0;
  --radius-sm:   2px;     /* productive / app default */
  --radius-md:   4px;     /* expressive default */
  --radius-lg:   8px;     /* used sparingly */
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0, 45, 100, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 45, 100, 0.07), 0 1px 2px rgba(0, 45, 100, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 45, 100, 0.10);
  --shadow-lg: 0 12px 32px rgba(0, 45, 100, 0.14);
  --shadow-focus: var(--focus-shadow-flat);

  /* ================================================================== */
  /* ① CORE — ICONOGRAPHY (Lucide — confirmed interim set)              */
  /* ================================================================== */

  --icon-xs: 14px;  /* inline with meta / prod-sm text */
  --icon-sm: 16px;  /* table rows, inputs, chips, dense chrome */
  --icon-md: 20px;  /* DEFAULT — buttons, nav, toolbars */
  --icon-lg: 24px;  /* page headers, section leads */
  --icon-xl: 32px;  /* empty states, feature moments — the MAX anywhere */
  --icon-stroke: 1.5;      /* default Lucide stroke-width */
  --icon-stroke-dense: 2;  /* at ≤ 16 px only, for legibility */

  /* ================================================================== */
  /* ① CORE — STRUCTURE                                                 */
  /* ================================================================== */

  --container-max: 1280px; /* @kind other */
  --container-pad: clamp(1rem, 4vw, 3rem); /* @kind other */
  --header-h:      80px; /* @kind other */
  --header-h-compact: 44px; /* @kind other */   /* dense app chrome: toolbars, sub-headers, filter bars */
  --sau-roller-tilt: 25.5deg; /* @kind other */   /* Brand-mandated S-mark tilt */

  /* ================================================================== */
  /* ① CORE — MOTION                                                    */
  /* ------------------------------------------------------------------ */
  /* PRODUCTIVE motion — instant feedback in UI. Fast, no overshoot.    */
  /* EXPRESSIVE motion — slower, brand-led moments (hero, full page).   */
  /* The brand is restrained: no bounces, no springs, no overshoot.     */
  /* ================================================================== */

  /* Durations */
  --dur-instant:  70ms; /* @kind other */     /* micro feedback — hover state */
  --dur-fast:     120ms; /* @kind other */    /* productive: state change */
  --dur-base:     200ms; /* @kind other */    /* productive: panel, modal */
  --dur-slow:     320ms; /* @kind other */    /* expressive: page entrance */
  --dur-deliberate: 480ms; /* @kind other */  /* expressive: hero scroll-in */

  /* Easings — productive vs expressive */
  --ease-prod-standard: cubic-bezier(0.2, 0, 0.38, 0.9); /* @kind other */   /* productive ⇄ */
  --ease-prod-entrance: cubic-bezier(0, 0, 0.38, 0.9); /* @kind other */     /* productive → */
  --ease-prod-exit:     cubic-bezier(0.2, 0, 1, 0.9); /* @kind other */      /* productive ← */
  --ease-expr-standard: cubic-bezier(0.4, 0.14, 0.3, 1); /* @kind other */   /* expressive ⇄ */
  --ease-expr-entrance: cubic-bezier(0, 0, 0.3, 1); /* @kind other */        /* expressive → */
  --ease-expr-exit:     cubic-bezier(0.4, 0.14, 1, 1); /* @kind other */     /* expressive ← */

  /* Legacy aliases — for compatibility with earlier preview cards */
  --ease-standard: var(--ease-prod-standard); /* @kind other */
  --ease-out:      var(--ease-prod-entrance); /* @kind other */
  --ease-in:       var(--ease-prod-exit); /* @kind other */

  /* ================================================================== */
  /* ③ COMPONENT TOKENS                                                 */
  /* ------------------------------------------------------------------ */
  /* Per-component, derived from semantic layer. Edit these to retune   */
  /* a single component without touching the rest of the system.        */
  /*                                                                    */
  /* RULE: a component token must resolve through the SEMANTIC layer,   */
  /* never straight to a --sau-* core value — otherwise .sau-dark       */
  /* cannot reach it and the component stays light in dark mode.        */
  /* ================================================================== */

  /* Buttons */
  --button-primary-bg:           var(--bg-brand);
  --button-primary-bg-hover:     var(--sau-blue-hover);
  --button-primary-bg-pressed:   var(--sau-blue-pressed);
  --button-primary-fg:           var(--fg-on-brand);
  --button-secondary-bg:         var(--bg);
  --button-secondary-bg-hover:   var(--bg-subtle);
  --button-secondary-fg:         var(--fg1);
  --button-secondary-border:     var(--border-strong);
  --button-ghost-fg:             var(--fg-brand);
  --button-ghost-bg-hover:       var(--bg-brand-soft);
  /* Danger — the one non-blue button. Destructive intent is the case the
     palette cannot carry, so it takes --status-error (COMPLIANCE §2b).
     White text on #A53A2E is 6.5:1. */
  --button-danger-bg:            var(--status-error);
  --button-danger-bg-hover:      var(--status-error-strong);
  --button-danger-fg:            var(--fg-on-brand);
  --button-radius:               var(--radius-md);
  --button-padding-y:            var(--sp-3); /* @kind spacing */
  --button-padding-x:            var(--sp-5); /* @kind spacing */

  /* Inputs */
  --input-bg:                    var(--bg);
  --input-bg-disabled:           var(--bg-subtle);
  --input-fg:                    var(--fg1);
  --input-fg-placeholder:        var(--fg3);
  --input-border:                var(--border-strong);
  --input-border-hover:          var(--fg2);
  --input-border-focus:          var(--border-brand);
  --input-radius:                var(--radius-md);
  --input-padding-y:             var(--sp-3); /* @kind spacing */
  --input-padding-x:             var(--sp-4); /* @kind spacing */

  /* Cards */
  --card-bg:                     var(--bg);
  --card-border:                 var(--border);
  --card-border-hover:           var(--border-strong);
  --card-shadow-hover:           var(--shadow-md);
  --card-radius:                 var(--radius-md);
  --card-padding:                var(--sp-6); /* @kind spacing */

  /* Badges */
  --badge-info-bg:               var(--status-info-bg);
  --badge-info-fg:               var(--sau-dark-blue);
  --badge-neutral-bg:            var(--status-neutral-bg);
  --badge-neutral-fg:            var(--fg2);
  --badge-brand-bg:              var(--bg-brand-soft);
  --badge-brand-fg:              var(--fg-brand);
  --badge-radius:                var(--radius-sm);
  --badge-radius-pill:           var(--radius-pill);

  /* Header / nav */
  --header-bg:                   rgba(255, 255, 255, 0.92);
  --header-border:               var(--border-subtle);
  --header-link:                 var(--fg1); /* @kind color */
  --header-link-active:          var(--fg-brand); /* @kind color */
}

/* ====================================================================== */
/* SEMANTIC TYPE STYLES                                                   */
/* ====================================================================== */

.sau-hero,
h1.sau-hero {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-hero));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  font-style: normal;
}

h1, .sau-h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4.5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  margin: 0 0 var(--sp-5);
  font-style: normal;
}

h2, .sau-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  margin: 0 0 var(--sp-5);
  font-style: normal;
}

h3, .sau-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  margin: 0 0 var(--sp-4);
  font-style: normal;
}

h4, .sau-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  margin: 0 0 var(--sp-3);
  font-style: normal;
}

h5, .sau-h5 {
  font-family: var(--font-text);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--fg1);
  margin: 0 0 var(--sp-2);
  font-style: normal;
}

/* Productive type — for UI inside products (apps, dashboards, tables) */
.sau-prod-h1 { font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-prod-2xl); line-height: var(--lh-snug); letter-spacing: -0.005em; color: var(--fg1); margin: 0; }
.sau-prod-h2 { font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-prod-xl); line-height: var(--lh-snug); color: var(--fg1); margin: 0; }
.sau-prod-h3 { font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-prod-lg); line-height: var(--lh-snug); color: var(--fg1); margin: 0; }
.sau-prod-body { font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--fs-prod-base); line-height: var(--lh-prod); color: var(--fg1); }
.sau-prod-label { font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--fs-prod-sm); line-height: var(--lh-prod); color: var(--fg2); }
.sau-prod-caption { font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--fs-prod-xs); line-height: var(--lh-prod); color: var(--fg2); letter-spacing: 0.02em; }
.sau-prod-mono { font-family: var(--font-mono); font-size: var(--fs-prod-sm); line-height: var(--lh-prod); color: var(--fg1); }

/* Eyebrow / overline — thin blue accent rule + ALL-CAPS label. */
.sau-eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--fg-brand);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-3);
}
.sau-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
}

/* Card-type marker — the same device at product scale. Signals what a
   thing IS (category), so it is never a status colour and never green
   or red (COMPLIANCE §2b). Blue = identity, Dark Grey = working/draft,
   Cyan = finished. Reference: mimic-react → GridCards.tsx TypeMarker. */
.sau-type-marker {
  font-family: var(--font-text);
  font-size: var(--fs-prod-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--fg2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sau-type-marker::before {
  content: '';
  width: 14px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.sau-type-marker.is-identity { color: var(--fg-brand); }
.sau-type-marker.is-draft    { color: var(--fg2); }
.sau-type-marker.is-final    { color: var(--sau-cyan); }

/* Canonical section opener — eyebrow → headline → lead.
   Use as the FIRST child of every <section>. Locks the vertical rhythm
   so two designers' "opener" blocks render identically. See
   preview/section-rhythm.html for the rule and the don'ts. */
.sau-section-opener {
  margin-bottom: var(--sp-7);   /* 48 px before the section's body content */
  max-width: 60ch;
}
.sau-section-opener > .sau-eyebrow {
  margin-bottom: var(--sp-4);   /* 16 px under the rule */
}
.sau-section-opener > h1,
.sau-section-opener > h2,
.sau-section-opener > h3 {
  margin: 0 0 var(--sp-5);      /* 24 px under the headline */
  max-width: 18ch;
}
.sau-section-opener > .sau-lead,
.sau-section-opener > p {
  margin: 0;
  max-width: 60ch;
}

p, .sau-p {
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.sau-lead {
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  font-weight: var(--fw-regular);
}

.sau-meta {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.sau-caption {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg2);
  letter-spacing: 0.02em;
}

code, .sau-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--fg1);
}

a, .sau-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-prod-standard),
              border-color var(--dur-fast) var(--ease-prod-standard);
}
a:hover, .sau-link:hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}

.sau-slogan {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--sau-blue);
  text-transform: none;
  font-style: normal;
}

/* ====================================================================== */
/* ACCESSIBILITY — universal focus ring                                   */
/* ====================================================================== */

/* Every interactive element gets a consistent, AA-contrast focus ring.
   The double-ring approach (inset background, outer brand) survives any
   parent surface — light, dark, brand-coloured. */

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
  border-radius: var(--radius-sm);
}
/* Inverse focus — for buttons/links on dark surfaces. Opt in with the
   .on-dark class on the focusable element or any ancestor. */
.on-dark :focus-visible,
:focus-visible.on-dark {
  box-shadow: var(--focus-shadow-inverse);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====================================================================== */
/* BASE RESET                                                             */
/* ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }

/* Per guideline: italic / oblique are not used in any context. */
em, i, cite { font-style: normal; }

/* ── Dark mode (application surfaces) ─ toggle .sau-dark on a page/app root.
   Palette ported from mimic-react's .dark theme (blue-black page, cards lift
   toward Pantone Dark Blue); semantic tokens flip, brand hues stay. */
.sau-dark{
  --bg:#0A2347; --bg-subtle:#03152E; --bg-muted:#143057; --bg-brand-soft:rgba(0,159,227,.12);
  --fg:#E8EFF9; --fg1:#E8EFF9; --fg2:#A8BDD8; --fg3:#7E94B0;
  --fg-brand:#009FE3; --fg-link:#009FE3; --fg-link-hover:#E8EFF9;
  --border:#1F4477; --border-subtle:#16355C; --border-strong:#2D5188;
  --status-success:#6EBE96; --status-success-strong:#A7D8BD; --status-success-bg:rgba(52,162,112,.16);
  --status-error:#DC7B6F; --status-error-strong:#ECA89F; --status-error-bg:rgba(196,82,69,.16);
  /* These four resolved to CORE values, so the flip above could not reach
     them: a light-grey chip, dark-blue-on-dark-blue text and a white header
     on the dark app shell. The default (grey) status recipe needs them. */
  --status-neutral:      #A8BDD8;
  --status-neutral-bg:   rgba(232,239,249,.08);
  --status-emphasis:     #6FB7E8;
  --status-emphasis-bg:  rgba(0,159,227,.10);
  --badge-info-fg:       #6FB7E8;
  --header-bg:           rgba(10,35,71,.92);
}
/* Reversed (white) logo lock-up on dark surfaces — add .sau-logo to any logo <img> */
.sau-dark .sau-logo{filter:brightness(0) invert(1)}

/* ---- Iconography (Lucide interim set) --------------------------------
   Single colour, always currentColor. Default 20px / stroke 1.5. */
.sau-icon, .lucide { width: var(--icon-md); height: var(--icon-md); stroke-width: var(--icon-stroke); flex: none; vertical-align: middle; }
.sau-icon.sau-icon--xs, .sau-icon--xs { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke-dense); }
.sau-icon.sau-icon--sm, .sau-icon--sm { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke-dense); }
.sau-icon.sau-icon--lg, .sau-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.sau-icon.sau-icon--xl, .sau-icon--xl { width: var(--icon-xl); height: var(--icon-xl); }