/* ==========================================================================
   Muneris — brand tokens
   --------------------------------------------------------------------------
   THE canonical Muneris theme. Colour values below are sampled directly from
   the official logo artwork (see assets/img/) and are not to be guessed at or
   substituted. Everything else on the site derives from these.

   Official brand colours, exact:
     slate   #576E7E   the wordmark, and one third of the symbol
     cyan    #51C8E8   symbol
     orange  #FF8A3D   symbol
     tint    #EEF2F5   the light ground the brand is presented on

   Because cyan and orange are too light to carry text (1.95:1 and 2.35:1 on
   white), each has an accessible derived tone for type and links. Every
   text/background pairing used on the site clears WCAG AA (4.5:1); ratios are
   noted per token.
   ========================================================================== */

:root {
  /* --- Official brand colours (exact — do not alter) --------------------- */
  --brand-slate:   #576E7E;
  --brand-cyan:    #51C8E8;
  --brand-orange:  #FF8A3D;
  --brand-tint:    #EEF2F5;

  /* --- Slate ramp, derived from the wordmark colour ---------------------- */
  --ink:           #25333C;  /* headings              12.98:1 on white       */
  --deep:          #2E3F4A;  /* dark section ground   10.90:1 on white       */
  --slate-700:     #465D6C;  /*                        6.90:1 on white       */
  --slate-soft:    #43566A;  /* dividers on dark                             */

  /* --- Text -------------------------------------------------------------- */
  --text:          #2E3F4A;  /* body                  10.90:1 on white       */
  --text-muted:    #536876;  /* secondary   5.82:1 white · 5.17:1 on tint     */
  --on-dark:       #EEF2F5;  /*                        9.69:1 on --deep       */
  --on-dark-muted: #B7C7D1;  /*                        6.28:1 on --deep       */

  /* --- Accents ----------------------------------------------------------- */
  --accent:        #17758F;  /* cyan for type/links  5.28:1 white · 4.69 tint */
  --accent-deep:   #146579;  /* hover                                        */
  --accent-warm:   #A85310;  /* orange for type      5.37:1 white · 4.77 tint */

  /* On dark grounds the pure brand colours are safe and should be used:
     cyan 5.60:1 and orange 4.65:1 against --deep. */
  --accent-on-dark: #51C8E8;

  /* --- Surfaces ---------------------------------------------------------- */
  --bg:            #FFFFFF;
  --surface:       #EEF2F5;  /* the brand's own light ground                 */
  --surface-2:     #E2E9EE;
  --line:          #D9E1E7;
  --line-strong:   #C3D0D9;

  /* --- Typography -------------------------------------------------------- */
  /* The wordmark is a rounded geometric sans set in lowercase. The body face
     is a neutral system stack so the logo keeps its typographic voice. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --eyebrow-spacing: 0.15em;

  /* --- Scale & rhythm ---------------------------------------------------- */
  --measure:       68ch;
  --radius:        6px;
  --radius-lg:     12px;
  --shadow:        0 1px 2px rgba(37, 51, 60, .05),
                   0 8px 24px rgba(37, 51, 60, .07);
  --shadow-lg:     0 2px 4px rgba(37, 51, 60, .07),
                   0 18px 48px rgba(37, 51, 60, .12);

  --step--1: clamp(0.86rem, 0.83rem + 0.12vw, 0.92rem);
  --step-0:  clamp(1rem,    0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.2rem,  1.13rem + 0.34vw, 1.42rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.64vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.52rem + 1.13vw, 2.45rem);
  --step-4:  clamp(2.1rem,  1.7rem  + 1.95vw, 3.3rem);

  --gutter: clamp(1.15rem, 0.9rem + 1.2vw, 2rem);
  --section-y: clamp(3.5rem, 2.6rem + 4vw, 6.5rem);
}