/* =========================================================================
 * sb-tokens.css — Design tokens for the Stablerating frontend (UX-001, DEL-002)
 * Single source of truth for colour, typography, spacing, radii, shadows.
 * Everything downstream references var(--sb-*). Swap values here to re-skin.
 *
 * DIRECTION: the client's own approved design — navy + gold. Navy-deep carries
 * authority and is the primary; gold is the second voice, reserved for accents,
 * scores and marks. Neutrals are warm (cream page ground, sand borders).
 *
 * These were the claret/brass tokens of the superseded "register" direction
 * until 2026-09-03. The ramp NAMES are kept — a rename would touch every
 * component file for no visual gain — but every value now comes from
 * stallbewertung-html-export, measured, and matches sb-platform's
 * blocks/assets/sb-blocks.css. The two must stay in step: that file styles the
 * Elementor blocks, this one styles the app views, and they meet on the same
 * page.
 * ========================================================================= */

/* ---- Webfonts, self-hosted (NFR-002 / PRIV) ----------------------------
 * Until 2026-09-21 both families came from fonts.googleapis.com — twice: once
 * from this theme and once from Elementor, which added all 18 cuts of Cormorant
 * incl. italics nobody uses. Measured on staging, the two requests blocked first
 * paint by ~0.8 s on every page. Loading them from Google without consent also
 * sends every visitor's IP address to Google (LG München I, 20.01.2022,
 * 3 O 17493/20). The files are Google's own woff2 builds, latin + latin-ext
 * subsets; `unicode-range` means latin-ext is only fetched for a page that
 * actually shows such a character. Licence: SIL OFL 1.1 (assets/fonts/OFL-*.txt).
 * Elementor's own Google Fonts loading is switched off in SB_Assets. */
/* Cormorant Garamond — latin-ext (variable, weights 300–700) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond — latin (variable, weights 300–700) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext (variable, weights 400–700) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin (variable, weights 400–700) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Brand palette: navy (the design's `primary`) ----
   * The ramp keeps the old --sb-claret-* names so no component has to change;
   * every value is the approved navy scale. */
  --sb-claret-900: #050A17;
  --sb-claret-800: #081025; /* navy-deep — the design's primary */
  --sb-claret-700: #081025; /* primary */
  --sb-claret-600: #121E39; /* navy — primary hover */
  --sb-claret-500: #1C2B4C;
  --sb-claret-400: #40506F;
  --sb-claret-100: #E7EAF0;
  --sb-claret-050: #F4F6F9;

  /* ---- Gold: scores, marks, accents. GRAPHICS ONLY.
   * #CD9C34 on white is 2.6:1 — below even the 3:1 graphics threshold against
   * white, so it is used on navy (where it is 8.4:1) or as a large mark, never
   * as body copy. For gold-coloured TEXT use --sb-warn-ink. */
  --sb-brass-700: #6F5522;
  --sb-brass-600: #8A6A2C;
  --sb-brass-500: #CD9C34; /* gold */
  --sb-brass-400: #E1AF3B; /* gold-light */
  --sb-brass-100: #F6EFDF;

  /* ---- Ink / neutrals (warm, from the export) ---- */
  --sb-ink-900: #081025; /* headings, footer ground — navy-deep */
  --sb-ink-700: #0D1528; /* body text — the design's foreground */
  --sb-ink-500: #2A3346; /* secondary text */
  --sb-ink-400: #454D5E; /* muted / captions — 8.0:1 on white */
  --sb-line: #E3DDD1;    /* hairlines / borders — the design's border */
  /* The design carries THREE near-identical warm greys and they are not
   * interchangeable: `border` #E3DDD1 draws hairlines, `input` #EAE4D7 is a
   * shade lighter and outlines form controls only, and `muted` #F4F0E7 is the
   * ground of the segmented tab control (`secondary` #F3EEE3, below, is the
   * ground of sunk bands). Measured off the export's OKLCH values. */
  --sb-input-border: #EAE4D7;
  --sb-muted: #F4F0E7;
  --sb-line-strong: #CFC6B4;
  --sb-surface: #ffffff;   /* card */
  --sb-surface-2: #FEFAF1; /* page ground — the design's background */
  --sb-surface-3: #F3EEE3; /* sunk bands, tracks, tiles — secondary */

  /* ---- Status colours ---- */
  --sb-success: #2F6D4F;
  --sb-success-bg: #E7F0EB;
  --sb-warn: var(--sb-brass-500);
  --sb-warn-ink: #6F5522;  /* readable gold for text (7.0:1) */
  --sb-warn-bg: var(--sb-brass-100);
  --sb-error: #A32617;
  --sb-error-bg: #FBE7E4;
  --sb-info: var(--sb-claret-700);
  --sb-info-bg: var(--sb-surface-3);

  /* ---- Semantic aliases (use these in components) ---- */
  --sb-primary: var(--sb-claret-700);
  --sb-primary-hover: var(--sb-claret-600);
  --sb-primary-contrast: #FAF3E5; /* cream, as the design's buttons use */
  --sb-accent: var(--sb-brass-500);
  --sb-text: var(--sb-ink-700);
  --sb-text-muted: var(--sb-ink-400);
  --sb-bg: var(--sb-surface-2); /* page ground. Was --sb-surface (the white CARD colour): every
                                   PHP-template view (login, rate, add, search, profile) rendered white
                                   while the design and every Elementor page are cream (review walk 25.09). */
  --sb-bg-alt: var(--sb-surface-2);
  --sb-border: var(--sb-line);

  /* ---- Typography ----
   * The approved design's two faces: Inter for body and UI, Cormorant Garamond
   * for display. Both are already loaded by Elementor for the blocks, so the
   * app views and the Elementor sections now render in one typeface pair
   * instead of two. */
  --sb-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sb-font-head: "Cormorant Garamond", ui-serif, Georgia, Charter,
    "Times New Roman", serif;

  --sb-fs-xxs: 0.6875rem; /* 11 — uppercase labels */
  --sb-fs-xs: 0.78125rem; /* 12.5 */
  --sb-fs-sm: 0.875rem;   /* 14 */
  --sb-fs-base: 1.03125rem; /* 16.5 */
  --sb-fs-md: 1.125rem;   /* 18 */
  --sb-fs-lg: 1.3125rem;  /* 21 */
  --sb-fs-xl: 1.625rem;   /* 26 */
  --sb-fs-2xl: 2.125rem;  /* 34 */
  --sb-fs-3xl: 2.75rem;   /* 44 */

  --sb-lh-tight: 1.08;
  --sb-lh-snug: 1.3;
  --sb-lh-base: 1.62;

  --sb-fw-normal: 400;
  --sb-fw-medium: 500;
  --sb-fw-semibold: 600;
  --sb-fw-bold: 700;

  /* Uppercase label treatment. Tracking above ~.15em pulls letters into
   * separate shapes instead of a word — .11em is the ceiling here. */
  --sb-track-label: .11em;

  /* ---- Spacing scale (4px base) ---- */
  --sb-sp-1: 0.25rem;
  --sb-sp-2: 0.5rem;
  --sb-sp-3: 0.75rem;
  --sb-sp-4: 1rem;
  --sb-sp-5: 1.5rem;
  --sb-sp-6: 2rem;
  --sb-sp-7: 3rem;
  --sb-sp-8: 4rem;
  --sb-sp-9: 6rem;

  /* ---- Radii, from the approved design's Tailwind scale ----
   * `rounded-md` 12 (controls, buttons), `rounded-lg` 14 (the segmented tab
   * shell), `rounded-2xl` 22 (cards and panels). These are the values
   * sb-platform's blocks/assets/sb-blocks.css already uses; keep the two files
   * in step.
   *
   * Until 2026-09-04 these read 2 / 3 / 3 / 2 — the superseded "register"
   * direction, which was drawn with rules and near-square corners. The palette
   * and typography were re-pointed at the client's design a day earlier and
   * these were missed, so every theme-rendered control (the account forms, the
   * rating flow, the add-stable form, the profile) kept square corners and a
   * flat shadow while the Elementor sections beside them were rounded. */
  --sb-radius-sm: 8px;
  --sb-radius: 12px;
  --sb-radius-lg: 22px;
  --sb-radius-pill: 9999px;

  /* ---- Shadows: Tailwind's shadow-sm / -md / -lg as this export compiles
   * them. Both layers matter — the second is a tight dark edge that stops the
   * first reading as a blur. */
  --sb-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --sb-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --sb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* ---- Layout ---- */
  --sb-container: 1180px;
  --sb-container-narrow: 760px;
  --sb-header-h: 74px;

  /* ---- Motion ---- */
  --sb-transition: 150ms ease;

  /* ---- Focus ring (WCAG 2.2 — visible, high contrast) ---- */
  --sb-focus: 0 0 0 3px rgba(110, 31, 46, 0.30), 0 0 0 1px var(--sb-claret-700);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sb-transition: 0ms;
  }
}