/* ==========================================================================
   Motomarine v3 — Design Tokens
   Single source of truth for color, type, spacing, shadow.
   v4 direction: Google Sans for headings, Roboto for body and UI,
   4px radius on buttons and icon boxes, 10px on photos, square elsewhere.
   ========================================================================== */

:root {
    /* --- Brand colors --- */
    --primary: #e03035;
    --primary-hover: #c01f24;
    /* Red as small text: the nearest shades that clear 4.5:1 (inc/theme-options.php works them out for other brand colors) */
    --primary-ink: #c51d22;
    --primary-on-dark: #e86569;
    /* Red small text in context: ink on light surfaces, on-dark inside the dark ones below */
    --primary-text: var(--primary-ink);
    --secondary: #29406f;
    --secondary-hover: #1f3358;
    --light: #cad5e2;
    --light-hover: #bfcad7;

    /* --- Surfaces --- */
    --white: #ffffff;
    --light-bg: #f3f4f6;
    --bg-light: #f8f8f8;
    --border: #e2e8f0;
    --border-light: #eef2f6;
    --border-strong: #cbd5e1;

    /* --- Text --- */
    --heading: #0f172b;
    --body: #64748b;
    --muted: #475569;

    /* --- Primary tints (rgba) --- */
    --primary-rgb: 224, 48, 53;
    --primary-tint-08: rgba(var(--primary-rgb), .08);
    --primary-tint-10: rgba(var(--primary-rgb), .10);
    --primary-tint-15: rgba(var(--primary-rgb), .15);

    /* --- Typography --- */
    --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-heading: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --fs-body: 16px;
    --lh-body: 1.5;
    --fs-lead: 17px;

    /* Heading scale */
    --h1: 3.4375rem;
    --h2: 2.5125rem;
    --h3: 1.8125rem;
    --h4: 1.3125rem;
    --h5: 1.0625rem;
    --h6: 0.9375rem;

    /* --- Shadows --- */
    --shadow-sm: 0 2px 8px rgba(15, 23, 43, .06);
    --shadow: 0 8px 24px rgba(15, 23, 43, .08);
    --shadow-lg: 0 20px 50px rgba(15, 23, 43, .12);

    /* --- Layout --- */
    --section-y: 70px;
    --section-y-sm: 40px;
    --container-max: 1200px;
    --container-wide: 1320px;
    --container-narrow: 1080px;

    /* --- Motion --- */
    --transition: all .2s ease;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Dark surfaces: red small text switches to the light shade */
.bg-dark,
.cs-footer,
.cs-card--dark,
.cs-teaser--dark,
.cs-infocard--dark,
.cs-steprow--dark,
.cs-tabs--dark {
    --primary-text: var(--primary-on-dark);
}