/**
 * WWPosts Design System — Phase 0 tokens
 * ======================================
 * Dark-first foundation for the reskin. Additive: does not restyle existing
 * Existing Bootstrap chrome until surfaces opt into these tokens (Phase 1+).
 *
 * Load order: after vendor/bootstrap, before site.css / cp-forms.css.
 *
 * Brand direction: discovery / globe / local — electric cyan accent on deep
 * charcoal layers. Avoid purple-as-primary and cream/serif terracotta looks.
 *
 * Preview: /dev/design · /dev/design-tailwind · /dev/design-newstyles · /dev/design-tailwind-newstyles
 */

/* -------------------------------------------------------------------------- */
/* Breakpoint contract (CSS vars for JS; @media must use matching literals)  */
/* -------------------------------------------------------------------------- */
:root {
    --cp-bp-min: 390px;   /* smallest supported phone width */
    --cp-bp-sm: 576px;
    --cp-bp-md: 768px;
    --cp-bp-lg: 992px;
    --cp-bp-xl: 1200px;
    --cp-bp-xxl: 1400px;
    --cp-bp-uw: 1800px;   /* ultrawide / super-wide */

    /* Content rails */
    --cp-page-max-width: 1500px;
    --cp-form-max-width: 1080px;
    --cp-page-gutter: clamp(10px, 1.3vw, 22px);

    /* Cards / media (shared with site.css — keep values in sync) */
    --cp-card-media-aspect-ratio: 3.5 / 2;
    --cp-card-max-width: 390px;
    --cp-card-grid-min: 280px;
    --cp-card-grid-gap: clamp(0.85rem, 1.35vw, 1.35rem);

    /* Ads */
    --cp-feed-ad-scale: 0.8;
    --cp-ad-canvas-width: 370px;
    --cp-ad-canvas-height: 500px;

    /* Control height (forms) */
    --cp-control-height: 42px;

    /* Radii */
    --cp-radius-xs: 0.375rem;
    --cp-radius-sm: 0.5rem;
    --cp-radius-md: 0.75rem;
    --cp-radius-lg: 1rem;
    --cp-radius-xl: 1.25rem;
    --cp-radius-pill: 999px;

    /* Type */
    --cp-font-sans: Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --cp-font-display: Roboto, "Segoe UI", system-ui, sans-serif;
    --cp-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

    --cp-text-xs: 0.75rem;
    --cp-text-sm: 0.875rem;
    --cp-text-md: 1rem;
    --cp-text-lg: 1.125rem;
    --cp-text-xl: 1.35rem;
    --cp-text-2xl: 1.75rem;
    --cp-text-3xl: 2.25rem;
    --cp-text-display: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);

    --cp-leading-tight: 1.15;
    --cp-leading-snug: 1.3;
    --cp-leading-normal: 1.5;

    --cp-tracking-tight: -0.02em;
    --cp-tracking-wide: 0.06em;
    --cp-tracking-label: 0.08em;

    /* Motion durations / easing (see cp-motion.css) */
    --cp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --cp-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --cp-duration-fast: 140ms;
    --cp-duration-med: 240ms;
    --cp-duration-slow: 420ms;

    /* Brand accent (electric cyan) — default “primary blue” site-wide */
    --cp-accent: #00d4ff;
    --cp-accent-strong: #00b8e0;
    --cp-accent-soft: rgba(0, 212, 255, 0.14);
    --cp-accent-glow: rgba(0, 212, 255, 0.45);
    --cp-accent-ink: #031018;

    /* Cobalt tray tint (wells / recessed tracks — not grey slabs) */
    --cp-cobalt: #3d7cff;
    --cp-cobalt-soft: rgba(61, 124, 255, 0.16);
    --cp-cobalt-glow: rgba(61, 124, 255, 0.28);

    /* Field surfaces — soft-tray (ns-field--soft) is the default form/search look */
    --cp-field-border-soft: color-mix(in srgb, var(--cp-success, #3ddc84) 35%, transparent);
    --cp-elev-soft-tray:
        0 1px 0 color-mix(in srgb, var(--cp-success, #3ddc84) 12%, transparent),
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --cp-elev-soft-tray-focus:
        0 0 0 3px color-mix(in srgb, var(--cp-success, #3ddc84) 22%, transparent),
        0 6px 18px color-mix(in srgb, var(--cp-success, #3ddc84) 12%, transparent);

    /* Legacy cyan halo (deep-well / optional accents) */
    --cp-field-glow: 0 0 0 1px color-mix(in srgb, var(--cp-accent) 32%, transparent),
        0 0 14px color-mix(in srgb, var(--cp-accent-glow) 38%, transparent);
    --cp-field-glow-focus: 0 0 0 1px color-mix(in srgb, var(--cp-accent) 55%, transparent),
        0 0 0 0.2rem var(--cp-accent-soft),
        0 0 22px color-mix(in srgb, var(--cp-accent-glow) 55%, transparent);

    /* Map Bootstrap primary → electric cyan (replaces default #0d6efd blue) */
    --bs-primary: #00d4ff;
    --bs-primary-rgb: 0, 212, 255;
    --bs-primary-text-emphasis: #007a99;
    --bs-primary-bg-subtle: rgba(0, 212, 255, 0.12);
    --bs-primary-border-subtle: rgba(0, 212, 255, 0.35);
    --bs-link-color: #00b8e0;
    --bs-link-hover-color: #00d4ff;
    --bs-focus-ring-color: rgba(0, 212, 255, 0.4);

    /* Semantic (dark-first defaults; light theme overrides below) */
    --cp-success: #3ddc84;
    --cp-warning: #fbbf24;
    --cp-danger: #ff4d6d;
    --cp-info: #00d4ff;

    /* Validation (aligned with cp-forms.css) */
    --cp-required-color: #dc3545;
    --cp-valid-color: #198754;
    --cp-invalid-color: #dc3545;

    /* Category accents (defaults; Site Settings may override via _cat-theme-overrides) */
    --cp-cat-event: #fd7e14;
    --cp-cat-trail: #198754;
    --cp-cat-spot: #6f42c1;
    --cp-cat-marketplace: #dc2626;
    --cp-cat-track: #ffc107;
    --cp-cat-my-settings: #6c757d;

    /* Legacy light chrome (site.css consumers) */
    --cp-light-border: rgba(18, 45, 73, 0.28);
    --cp-light-border-strong: rgba(18, 45, 73, 0.42);
    --cp-light-shadow: 0 10px 28px rgba(15, 42, 68, 0.1);
}

/* -------------------------------------------------------------------------- */
/* Light theme surfaces (refined secondary — not cream / newspaper)            */
/* -------------------------------------------------------------------------- */
:root,
html[data-cp-theme="light"] {
    color-scheme: light;

    /* Cobalt-tinted surfaces (replace flat grey) */
    --cp-void: #e4ecf8;
    --cp-base: #eef3fb;
    --cp-raised: #f7f9fd;
    --cp-overlay: #ffffff;
    --cp-sunken: #dce6f4;
    --cp-well: #d4e0f2;
    --cp-well-deep: #c8d6ec;

    --cp-ink: #0f1b2d;
    --cp-ink-muted: #4a5d78;
    --cp-ink-faint: #7a8ba3;

    --cp-border: rgba(45, 90, 160, 0.18);
    --cp-border-strong: rgba(45, 90, 160, 0.32);
    --cp-hairline: rgba(45, 90, 160, 0.12);

    --cp-shadow-sm: 0 2px 8px rgba(15, 42, 68, 0.08);
    --cp-shadow-md: 0 8px 24px rgba(15, 42, 68, 0.12);
    --cp-shadow-lg: 0 18px 48px rgba(15, 42, 68, 0.16);
    --cp-shadow-glow: 0 0 0 1px rgba(0, 184, 224, 0.2), 0 8px 28px rgba(0, 184, 224, 0.18);

    --cp-elev-lip: inset 0 -3px 0 rgba(15, 42, 68, 0.08);
    --cp-elev-well: inset 0 2px 6px rgba(30, 60, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --cp-field-border-soft: color-mix(in srgb, var(--cp-success, #198754) 40%, var(--cp-border-strong));
    --cp-elev-soft-tray:
        0 1px 0 color-mix(in srgb, var(--cp-success, #198754) 16%, transparent),
        0 4px 12px rgba(15, 42, 68, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --cp-elev-soft-tray-focus:
        0 0 0 3px color-mix(in srgb, var(--cp-success, #198754) 22%, transparent),
        0 6px 16px color-mix(in srgb, var(--cp-success, #198754) 14%, transparent);

    --cp-page-surface-bg: var(--cp-raised);
    --cp-table-head-bg: #e0eaf8;
    --cp-table-surface-bg: #f7f9fd;

    --cp-focus-ring: 0 0 0 3px rgba(0, 184, 224, 0.35);

    --bs-primary: #00b8e0;
    --bs-primary-rgb: 0, 184, 224;
    --bs-link-color: #0090b0;
    --bs-link-hover-color: #00b8e0;

    --cp-required-color: #dc3545;
    --cp-valid-color: #198754;
    --cp-invalid-color: #dc3545;
}

/* -------------------------------------------------------------------------- */
/* Dark theme surfaces (primary look — deep charcoal, not pure black)          */
/* -------------------------------------------------------------------------- */
html[data-cp-theme="dark"] {
    color-scheme: dark;

    /* Cobalt-tinted charcoal wells (replace flat grey) */
    --cp-void: #06080f;
    --cp-base: #0a1018;
    --cp-raised: #121c2e;
    --cp-overlay: #182438;
    --cp-sunken: #070b12;
    --cp-well: #0c121c;
    --cp-well-deep: #05080e;

    --cp-ink: rgba(255, 255, 255, 0.92);
    --cp-ink-muted: rgba(200, 216, 235, 0.72);
    --cp-ink-faint: rgba(200, 216, 235, 0.45);

    --cp-border: rgba(0, 212, 255, 0.16);
    --cp-border-strong: rgba(0, 212, 255, 0.32);
    --cp-hairline: rgba(61, 124, 255, 0.14);

    --cp-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --cp-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
    --cp-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
    --cp-shadow-glow: 0 0 0 1px rgba(0, 212, 255, 0.28), 0 0 28px rgba(0, 212, 255, 0.22);

    --cp-elev-lip: inset 0 -4px 0 rgba(0, 0, 0, 0.28);
    --cp-elev-well: inset 0 2px 8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --cp-field-border-soft: color-mix(in srgb, var(--cp-success, #3ddc84) 35%, transparent);
    --cp-elev-soft-tray:
        0 1px 0 color-mix(in srgb, var(--cp-success, #3ddc84) 12%, transparent),
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --cp-elev-soft-tray-focus:
        0 0 0 3px color-mix(in srgb, var(--cp-success, #3ddc84) 22%, transparent),
        0 6px 18px color-mix(in srgb, var(--cp-success, #3ddc84) 12%, transparent);

    --cp-page-surface-bg: #0c1420;
    --cp-table-head-bg: #152238;
    --cp-table-surface-bg: #121c2e;

    --cp-focus-ring: 0 0 0 3px rgba(0, 212, 255, 0.4);

    --cp-required-color: #ff6b6b;
    --cp-valid-color: #3ddc84;
    --cp-invalid-color: #ff6b6b;

    --cp-accent-soft: rgba(0, 212, 255, 0.12);

    --bs-primary: #00d4ff;
    --bs-primary-rgb: 0, 212, 255;
    --bs-link-color: #00d4ff;
    --bs-link-hover-color: #5ae4ff;
}

/* -------------------------------------------------------------------------- */
/* Opt-in surface helpers (Phase 0 — use on new UI / styleguide only)           */
/* -------------------------------------------------------------------------- */
.cp-surface-void { background: var(--cp-void); color: var(--cp-ink); }
.cp-surface-base { background: var(--cp-base); color: var(--cp-ink); }
.cp-surface-raised {
    background: var(--cp-raised);
    color: var(--cp-ink);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    box-shadow: var(--cp-shadow-sm);
}
.cp-surface-overlay {
    background: var(--cp-overlay);
    color: var(--cp-ink);
    border: 1px solid var(--cp-border-strong);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-md);
}
.cp-surface-sunken {
    background: var(--cp-sunken);
    color: var(--cp-ink);
    border: 1px solid var(--cp-hairline);
    border-radius: var(--cp-radius-md);
    box-shadow: var(--cp-elev-well);
}

.cp-ink { color: var(--cp-ink); }
.cp-ink-muted { color: var(--cp-ink-muted); }
.cp-ink-faint { color: var(--cp-ink-faint); }
.cp-accent-text { color: var(--cp-accent); }

.cp-display {
    font-family: var(--cp-font-display);
    font-size: var(--cp-text-display);
    font-weight: 800;
    letter-spacing: var(--cp-tracking-tight);
    line-height: var(--cp-leading-tight);
    color: var(--cp-ink);
}

.cp-label-caps {
    font-size: var(--cp-text-xs);
    font-weight: 700;
    letter-spacing: var(--cp-tracking-label);
    text-transform: uppercase;
    color: var(--cp-ink-muted);
}

/* Content width rails */
.cp-rail {
    width: 100%;
    max-width: var(--cp-page-max-width);
    margin-inline: auto;
    padding-inline: var(--cp-page-gutter);
}

.cp-rail--form {
    max-width: var(--cp-form-max-width);
}

/* Ultrawide: keep primary content from stretching endlessly */
@media (min-width: 1800px) {
    :root {
        --cp-page-gutter: clamp(22px, 2vw, 40px);
    }
}

/* Phone floor: discourage horizontal overflow at 390px */
@media (max-width: 389.98px) {
    .cp-rail {
        padding-inline: 8px;
    }
}