/**
 * Cadence Community Management design tokens.
 *
 * This is the single source of truth for brand roles, layout, spacing,
 * typography, elevation, and motion. Components must consume semantic tokens
 * from this file instead of introducing unreviewed hex values or dimensions.
 */
:root {
    /* Brand and surface roles */
    --ccm-color-ink: #10151b;
    --ccm-color-black: #000000;
    --ccm-color-brand-slate: #314156;
    --ccm-color-brand-slate-hover: #3c5069;
    --ccm-color-service-hover: #3a4c63;
    --ccm-color-hero-accent: #bdd0e0;
    --ccm-color-gold: #c8a45a;
    --ccm-color-gold-hover: color-mix(in srgb, var(--ccm-color-gold) 82%, var(--ccm-color-ink));
    --ccm-color-gold-soft: color-mix(in srgb, var(--ccm-color-gold) 18%, transparent);
    --ccm-color-on-gold: var(--ccm-color-ink);
    --ccm-color-hero-deep: #11151b;
    --ccm-color-surface: #ffffff;
    --ccm-color-section-soft: #edf3f9;
    --ccm-color-surface-muted: #e9eef3;
    --ccm-color-surface-review: #f6f6f6;
    --ccm-color-night: #0a0e13;
    --ccm-color-night-panel: #141e29;
    --ccm-color-hero-surface: var(--ccm-color-night-panel);
    --ccm-color-line: #e5e7eb;
    --ccm-color-text-muted: rgba(16, 21, 27, 0.68);
    --ccm-color-rating: #3c6fad;
    --ccm-color-rating-ink: #0b0707;

    /* Typography */
    --ccm-font-sans: "Manrope", Arial, sans-serif;
    --ccm-font-rating: var(--ccm-font-sans);
    --ccm-weight-body: 400;
    --ccm-weight-ui: 600;
    --ccm-weight-card: 600;
    --ccm-weight-section: 650;
    --ccm-weight-hero: 700;
    --ccm-weight-eyebrow: 700;
    --ccm-text-xs: 13px;
    --ccm-text-sm: 14px;
    --ccm-text-supporting: 15px;
    --ccm-text-body: 16px;
    --ccm-text-lead: 17px;
    --ccm-text-card-title: 18px;
    --ccm-text-action: 13px;
    --ccm-text-section-small: 20px;
    --ccm-text-section: 32px;
    --ccm-text-hero: 40px;
    --ccm-text-hero-internal: clamp(42px, 3.4vw, 52px);
    --ccm-text-section-heading: clamp(34px, 3vw, 48px);
    --ccm-text-card-heading: clamp(20px, 1.6vw, 24px);
    --ccm-leading-body: 1.5;
    --ccm-leading-hero-internal: 1.04;
    --ccm-leading-section-heading: 1.1;
    --ccm-leading-card-heading: 1.25;
    --ccm-leading-lead: 1.6;
    --ccm-tracking-eyebrow: 0.15em;
    --ccm-tracking-hero-internal: -0.04em;
    --ccm-tracking-section-heading: -0.03em;
    --ccm-tracking-button: 0.84px;

    /* Layout: compact Figma width through 1194px, unified wide desktop above it */
    --ccm-container-fidelity: 1049px;
    --ccm-container-wide: 1600px;
    --ccm-container-narrow: 720px;
    --ccm-page-gutter: 20px;
    --ccm-layout-width: min(
        var(--ccm-container-fidelity),
        calc(100% - var(--ccm-page-gutter) - var(--ccm-page-gutter))
    );
    --ccm-section-space: 72px;
    --ccm-grid-gap: 32px;
    --ccm-split-gap: 48px;
    --ccm-content-measure: 62ch;
    --ccm-control-min: 44px;
    --ccm-card-min-height: 248px;

    /* 4/8-based spacing scale and semantic content relationships */
    --ccm-space-1: 4px;
    --ccm-space-2: 8px;
    --ccm-space-3: 12px;
    --ccm-space-4: 16px;
    --ccm-space-5: 24px;
    --ccm-space-6: 32px;
    --ccm-space-7: 48px;
    --ccm-space-8: 64px;
    --ccm-space-9: 80px;
    --ccm-space-10: 96px;
    --ccm-stack-eyebrow: var(--ccm-space-3);
    --ccm-stack-copy: var(--ccm-space-4);
    --ccm-stack-action: var(--ccm-space-5);

    /* Shape and elevation */
    --ccm-radius-none: 0;
    --ccm-radius-card: 4px;
    --ccm-radius-photo: clamp(12px, 1.15vw, 18px);
    --ccm-radius-round: 999px;
    --ccm-shadow-card: 0 4px 14px rgba(49, 65, 86, 0.06);
    --ccm-shadow-card-hover: 0 10px 22px rgba(49, 65, 86, 0.1);
    --ccm-shadow-photo: 0 18px 42px rgba(16, 21, 27, 0.1);
    --ccm-shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.25);
    --ccm-shadow-service: 0 4px 16.8px rgba(0, 0, 0, 0.25);

    /* Motion */
    --ccm-motion-fast: 180ms;
    --ccm-motion-standard: 220ms;
    --ccm-motion-reveal: 650ms;
    --ccm-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Icon system: pinned Lucide, 24x24 viewBox, 2px non-scaling stroke */
    --ccm-icon-nav: 16px;
    --ccm-icon-inline: 16px;
    --ccm-icon-check: 18px;
    --ccm-icon-rating-card: 16px;
    --ccm-icon-rating: 20px;
    --ccm-icon-base: 24px;
    --ccm-icon-service: 36px;
    --ccm-icon-control: 44px;
    --ccm-icon-tile: 56px;
    --ccm-action-gap: 8px;

    /* Stacking */
    --ccm-z-header: 100;
    --ccm-z-overlay: 105;
    --ccm-z-toggle: 110;
    --ccm-z-skip: 1000;

    /* Backward-compatible aliases used by the approved homepage */
    --ink: var(--ccm-color-ink);
    --black: var(--ccm-color-black);
    --slate: var(--ccm-color-brand-slate);
    --hero-blue: var(--ccm-color-hero-accent);
    --soft: var(--ccm-color-surface-muted);
    --review: var(--ccm-color-surface-review);
    --night: var(--ccm-color-night);
    --night-panel: var(--ccm-color-night-panel);
    --line: var(--ccm-color-line);
    --white: var(--ccm-color-surface);
    --container: var(--ccm-container-wide);
    --shadow: var(--ccm-shadow-raised);
}

@media (min-width: 1195px) {
    :root {
        --ccm-page-gutter: 48px;
        --ccm-layout-width: min(
            var(--ccm-container-wide),
            calc(100% - var(--ccm-page-gutter) - var(--ccm-page-gutter))
        );
        --ccm-section-space: clamp(80px, 5.5vw, 88px);
        --ccm-grid-gap: clamp(32px, 2.5vw, 40px);
        --ccm-split-gap: clamp(48px, 3.5vw, 64px);
    }
}

@media (max-width: 1040px) {
    :root {
        --ccm-page-gutter: 32px;
        --ccm-layout-width: min(
            var(--ccm-container-fidelity),
            calc(100% - var(--ccm-page-gutter) - var(--ccm-page-gutter))
        );
        --ccm-section-space: 64px;
        --ccm-grid-gap: 24px;
        --ccm-split-gap: 32px;
    }
}

@media (max-width: 760px) {
    :root {
        --ccm-page-gutter: 16px;
        --ccm-section-space: 56px;
        --ccm-split-gap: 24px;
    }
}

@media (max-width: 480px) {
    :root {
        --ccm-section-space: 48px;
    }
}