/* ============================================================
   Resonans — Color tokens
   Extracted verbatim from the Resonans brand book (.fig).
   Primary palette: Black · White · Blood-Orange Red (#CC0025)
   ============================================================ */

:root {
  /* ---- Brand core (exact from color-pallet slide) ---- */
  --rz-black: #000000;          /* Pantone Black 6 C */
  --rz-white: #ffffff;
  --rz-red: #cc0025;            /* "Blood Orange" · Pantone 2035 C · the signature accent */

  /* ---- Red scale (derived + observed reds) ---- */
  --rz-red-bright: #ff5c2f;     /* rgb(255,92,47) — energetic highlight */
  --rz-red-hot:    #ff143f;     /* rgb(255,20,63) — legacy CTA hover ("btn-hover" on resonans.academy); owner-approved */
  --rz-red-600: #cc0025;
  --rz-red-800: #660013;        /* rgb(102,0,19) */
  --rz-red-950: #270004;        /* rgb(39,0,4) — near-black maroon */
  --rz-red-glow: rgba(204,0,37,0.55); /* used in radial background glows */

  /* ---- Neutral scale (observed grays, unsnapped) ---- */
  --rz-neutral-0:   #ffffff;
  --rz-neutral-50:  #f8f8f8;    /* watermark / off-white type */
  --rz-neutral-100: #f5f5f5;    /* light card fill */
  --rz-neutral-200: #eaeaea;
  --rz-neutral-300: #dbdbdb;    /* hairline stroke */
  --rz-neutral-400: #d4d4d4;
  --rz-neutral-500: #737373;
  --rz-neutral-600: #4d4d4d;
  --rz-neutral-700: #2c2c2c;
  --rz-neutral-800: #1a1a1a;    /* dark surface / tonal shapes */
  --rz-neutral-850: #161616;
  --rz-neutral-900: #0f0f0f;
  --rz-neutral-950: #000000;

  /* ============================================================
     SEMANTIC ALIASES — default = LIGHT surface
     Wrap any element in .rz-dark (or [data-theme="dark"]) to flip.
     ============================================================ */
  --rz-bg:            var(--rz-white);
  --rz-bg-elevated:   var(--rz-neutral-100);
  --rz-surface:       var(--rz-neutral-100);
  --rz-surface-2:     var(--rz-neutral-200);

  --rz-text:          var(--rz-black);
  /* --rz-text-muted is the floor for running text and micro-labels: 6.4:1 on
     white, 7.4:1 on black — passes WCAG AA at any size. */
  --rz-text-muted:    rgba(0,0,0,0.55);
  /* --rz-text-subtle is 2.4:1 on white. It is a LARGE-TYPE-ONLY colour: use it
     only at >=24px display sizes, or on non-text marks (placeholder glyphs,
     hairline fills). Never on 13-15px labels — that is where it was quietly
     failing across the site. */
  --rz-text-subtle:   rgba(0,0,0,0.35);
  --rz-text-inverse:  var(--rz-white);

  --rz-border:        var(--rz-neutral-300);
  --rz-border-strong: var(--rz-neutral-400);

  --rz-accent:          var(--rz-red);
  --rz-accent-hover:    #b00020;
  --rz-accent-press:    #99001c;
  --rz-on-accent:       var(--rz-white);
  --rz-btn-hover:       var(--rz-red-hot); /* primary CTA hover — brightens to hot red, 1:1 with legacy resonans.academy */

  --rz-motif:         var(--rz-neutral-100);   /* tonal half-circle fill on light */
  --rz-focus-ring:    rgba(204,0,37,0.45);

  color-scheme: light;
}

/* ---- DARK surface (the brand's signature context) ---- */
.rz-dark,
[data-theme="dark"] {
  --rz-bg:            var(--rz-black);
  --rz-bg-elevated:   var(--rz-neutral-850);
  --rz-surface:       var(--rz-neutral-800);
  --rz-surface-2:     var(--rz-neutral-850);

  --rz-text:          var(--rz-white);
  --rz-text-muted:    rgba(255,255,255,0.60);
  --rz-text-subtle:   rgba(255,255,255,0.40);
  --rz-text-inverse:  var(--rz-black);

  --rz-border:        var(--rz-neutral-700);
  --rz-border-strong: var(--rz-neutral-600);

  --rz-motif:         var(--rz-neutral-800);   /* tonal half-circle fill on black */

  /* Watermark ink — oversized display glyphs that sit BEHIND content on black
     (team-card monograms). Deliberately below text contrast: it is texture. */
  --rz-watermark:     rgba(255,255,255,0.06);

  color-scheme: dark;
}