/*
 * Soofos legacy token compat layer — ALIAS BRIDGE.
 *
 * The `--soofos-*` custom properties below are consumed by pre-Rework screen
 * CSS (portal-shell, my-courses, player, settings, onboarding-*). They are
 * NOT a second source of truth: every color, font-family, and shadow value
 * is an alias onto the canonical brand tokens in the theme-root tokens.css
 * ("NEW BRAND", brandbook applied July 8 — Mulish, Klassiek blue #639ce0,
 * cool blue backgrounds). Restyling happens there; this file only bridges
 * old names to the canonical variables.
 *
 * Loaded as 'soofos-tokens-compat' AFTER the canonical 'soofos-tokens'
 * (dependency chain in functions.php: soofos-tokens → soofos-components →
 * soofos-shell → soofos-tokens-compat), so every var() reference resolves.
 * Remove this file once the legacy screens are ported to canonical names.
 *
 * Structural tokens (spacing --soofos-space-*, radii --soofos-radius-*,
 * font weights) keep their literal values — legacy CSS depends on them and
 * they are brand-neutral.
 *
 * NOTE for the orchestrator: docs/DESIGN-SYSTEM.md still documents the old
 * (pre-July-8) color values — it is stale and was intentionally not followed
 * for colors here.
 */

:root {

    /* ---------------------------------------------------------------------
     * Color — ink / navy scale
     * ------------------------------------------------------------------- */
    --soofos-ink: var(--ink); /* primary text/heading color; navy button fill */
    --soofos-footer-navy: var(--ink); /* footer surface — canonical footer (#sf-footer) uses --ink; no separate footer-navy token exists */
    --soofos-video-dark: var(--player-dark); /* course-player video surface background */

    /* ---------------------------------------------------------------------
     * Color — primary blue scale
     * ------------------------------------------------------------------- */
    --soofos-primary: var(--blue); /* primary buttons/links/active states */
    --soofos-primary-hover: var(--blue-hover); /* hover state for primary buttons/links */
    --soofos-primary-hover-on-navy: var(--blue-hover); /* nearest counterpart — canonical set has no dedicated on-navy hover token */
    --soofos-text-link: var(--deep-blue); /* deep-blue link/emphasis text on light backgrounds */

    /* ---------------------------------------------------------------------
     * Color — light-blue fills & tints
     * ------------------------------------------------------------------- */
    --soofos-blue-fill: var(--blue-fill); /* light-blue fill for highlighted cards/badges */
    --soofos-blue-tint: var(--blue-tint); /* lighter tint / subtle section backgrounds */
    --soofos-blue-border: var(--blue-border); /* border/divider on light-blue surfaces */

    /* ---------------------------------------------------------------------
     * Color — B2B purple (zakelijk brand)
     * ------------------------------------------------------------------- */
    --soofos-purple: var(--purple); /* B2B/teams brand accent — used for the Soofos-zakelijk mark, team-checkout step indicator, and team-checkout CTA */

    /* ---------------------------------------------------------------------
     * Color — page / canvas backgrounds
     * (formerly warm neutrals; canonical brand uses cool blue backgrounds)
     * ------------------------------------------------------------------- */
    --soofos-bg-warm: var(--page); /* default page background */
    --soofos-bg-canvas: var(--canvas); /* app-shell background behind cards */
    --soofos-bg-strip: var(--strip); /* strip / search-pill background */

    /* ---------------------------------------------------------------------
     * Color — borders
     * ------------------------------------------------------------------- */
    --soofos-border-card: var(--card-border); /* card border */
    --soofos-border-input: var(--input-border); /* form input border */

    /* ---------------------------------------------------------------------
     * Color — muted text scale
     * ------------------------------------------------------------------- */
    --soofos-text-muted: var(--muted); /* secondary body text */
    --soofos-text-muted-2: var(--muted-2); /* tertiary/meta text (timestamps, labels) */
    --soofos-text-faint: var(--faint); /* faintest placeholder/disabled text — decorative use only */

    /* ---------------------------------------------------------------------
     * Color — amber accent (streaks, badges, highlights)
     * ------------------------------------------------------------------- */
    --soofos-amber: var(--amber); /* amber accent fill for streak/gamification chips */
    --soofos-amber-badge-text: var(--amber-badge-tx); /* badge label text on amber fills */
    --soofos-amber-fill: var(--amber-fill); /* amber badge/chip fill */
    --soofos-amber-fill-2: var(--amber-fill-2); /* lighter amber fill variant */
    --soofos-amber-text: var(--amber-text); /* mid-tone amber text on amber fills */
    --soofos-amber-text-2: var(--amber-text-2); /* alternate amber text tone */

    /* ---------------------------------------------------------------------
     * Color — green (success, progress, completion)
     * ------------------------------------------------------------------- */
    --soofos-green: var(--green); /* success/progress/completion text & icons */
    --soofos-green-fill: var(--green-fill); /* green success fill/background */

    /* ---------------------------------------------------------------------
     * Color — base
     * ------------------------------------------------------------------- */
    --soofos-white: var(--white); /* base surface / text-on-dark color */

    /* ---------------------------------------------------------------------
     * Typography
     * Font family aliases the canonical brand typeface (Mulish). Weights are
     * structural — kept literal, legacy CSS depends on them.
     * ------------------------------------------------------------------- */
    --soofos-font-family: var(--font); /* brand typeface — Mulish, loaded in functions.php */
    --soofos-font-weight-regular: 400; /* body copy */
    --soofos-font-weight-semibold: 600; /* light emphasis */
    --soofos-font-weight-bold: 700; /* labels, buttons */
    --soofos-font-weight-extrabold: 800; /* card titles, nav, sub-headings */
    --soofos-font-weight-black: 900; /* headings */

    /* ---------------------------------------------------------------------
     * Radii — structural, kept literal (do not re-point).
     * ------------------------------------------------------------------- */
    --soofos-radius-pill: 999px; /* pill buttons and chips */
    --soofos-radius-lg: 18px; /* large cards */
    --soofos-radius-card: var(--r-card); /* standard card radius (canonical 16px) — was undefined, fell back to 0 */
    --soofos-radius-md: 14px; /* standard cards */
    --soofos-radius-sm: 8px; /* inline controls, small elements */

    /* ---------------------------------------------------------------------
     * Spacing scale — structural, kept literal (do not re-point).
     * ------------------------------------------------------------------- */
    --soofos-space-2xs: 2px;
    --soofos-space-xs: 4px;
    --soofos-space-sm: 8px;
    --soofos-space-md: 12px;
    --soofos-space-lg: 16px;
    --soofos-space-xl: 20px;
    --soofos-space-2xl: 28px;
    --soofos-space-3xl: 48px;
    --soofos-control-min-height: 44px; /* accessible minimum interactive target */

    /* Course-player composition measurements (Calm Workspace concept). */
    --soofos-player-header-height: 4.125rem;
    --soofos-player-header-height-mobile: 3.75rem;
    --soofos-player-sidebar-width: 19.375rem;
    --soofos-player-content-width: 61.25rem;
    --soofos-player-drawer-width: 21.25rem;
    --soofos-player-brand-width: 5.875rem;
    --soofos-player-brand-mark-width: 2rem;
    --soofos-player-icon-tile: 2.125rem;
    --soofos-player-avatar-size: 2rem;

    /* Player type scale. */
    --soofos-player-text-2xs: .625rem;
    --soofos-player-text-xs: .6875rem;
    --soofos-player-text-sm: .75rem;
    --soofos-player-text-md: .8125rem;
    --soofos-player-text-lg: .875rem;
    --soofos-player-title-size: clamp(1.5rem, 2.5vw, 1.9375rem);

    /* ---------------------------------------------------------------------
     * Shadows — aliased to the nearest canonical elevation.
     * ------------------------------------------------------------------- */
    --soofos-shadow-card: var(--shadow-soft); /* resting card elevation */
    --soofos-shadow-card-featured: var(--shadow-card); /* featured card elevation */
    --soofos-shadow-raised: var(--shadow-card); /* hover/raised card elevation */
    --soofos-shadow-popover: var(--shadow-pop); /* dropdowns, popovers, floating rails */
    --soofos-shadow-modal: 0 30px 80px rgba(0, 0, 0, .35); /* full-screen modal/overlay — no canonical counterpart, literal kept */
    --soofos-shadow-focus: 0 0 0 4px var(--soofos-blue-fill); /* focus ring — no canonical focus token; composes the (aliased) blue fill */

    /* ---------------------------------------------------------------------
     * Status — aliased to canonical.
     * ------------------------------------------------------------------- */
    --soofos-error: var(--error); /* error status text (was undefined; player.css fell back to a stray hex) */

    /* ---------------------------------------------------------------------
     * On-navy — text/surfaces on a --ink (navy) background. No canonical
     * counterpart yet (split-checkout order rail is the first dark surface).
     * ------------------------------------------------------------------- */
    --soofos-on-navy: #ffffff;
    --soofos-on-navy-soft: #bcc9da; /* body rows / amounts on navy */
    --soofos-on-navy-muted: #8fa5c0; /* secondary text on navy */
    --soofos-on-navy-surface: rgba(255, 255, 255, .07); /* raised card on navy */
    --soofos-on-navy-border: rgba(255, 255, 255, .14); /* card hairline on navy */
    --soofos-on-navy-hairline: rgba(255, 255, 255, .12); /* divider on navy */

    /* ---------------------------------------------------------------------
     * Public-pages redesign — shadows / overlays / marquee fade (TASK-421).
     *
     * The uncommitted public-pages redesign (home / programs / teach-on-soofos)
     * introduced off-token colour/shadow/geometry literals. These tokens
     * capture those literals VERBATIM (same colour, same alpha, same offsets)
     * so the refactor preserves visual output exactly. No canonical
     * counterpart exists for these composite drop-shadows/overlays; they are
     * scoped to the marketing pages, not the Calm-Workspace app screens.
     * ------------------------------------------------------------------- */

    /* Coloured drop-shadows (design named these off-token). Alpha-composited
     * over the button/card fill; the base colour tracks the brand token noted. */
    --soofos-shadow-red-cta: 0 6px 18px rgba(255, 72, 89, .28); /* red CTA (base --red #ff4859) */
    --soofos-shadow-blue-cta: 0 8px 24px rgba(99, 156, 224, .35); /* blue CTA (base --blue #639ce0) */

    /* Navy drop-shadows. Design used rgba(22, 50, 74, …) (#16324a) — a deeper
     * navy than the canonical --shadow-* base (rgba(33,52,75,…)) — so these are
     * kept as distinct literals to avoid shifting the marketing-page look. */
    --soofos-shadow-navy-card: 0 6px 18px rgba(22, 50, 74, .1); /* home course-card hover */
    --soofos-shadow-navy-stage: 0 10px 30px rgba(22, 50, 74, .22); /* home USP stage */
    --soofos-shadow-navy-soft: 0 8px 24px rgba(22, 50, 74, .12); /* home course-tabs card */

    /* Canonical-navy drop-shadows: base rgba(33, 52, 75, …) (#21344b = --ink),
     * matching the --shadow-* family but with page-specific offsets/alpha. */
    --soofos-shadow-card-lift: 0 10px 30px rgba(33, 52, 75, .08); /* programs media card */
    --soofos-shadow-navy-strong: 0 14px 40px rgba(33, 52, 75, .25); /* teach section */
    --soofos-shadow-navy-deep: 0 24px 60px rgba(33, 52, 75, .35); /* teach card */
    --soofos-shadow-black-hero: 0 24px 60px rgba(0, 0, 0, .35); /* teach hero on --ink-2 */

    /* White overlays on navy/dark surfaces (home USP carousel + marquee). */
    --soofos-overlay-white-85: rgba(255, 255, 255, .85); /* marquee tile count text */
    --soofos-overlay-white-35: rgba(255, 255, 255, .35); /* USP dot (inactive) */
    --soofos-overlay-white-15: rgba(255, 255, 255, .15); /* marquee photo placeholder */
    --soofos-overlay-white-10: rgba(255, 255, 255, .1); /* USP arrow hover */

    /* Amber tint overlay (programs hero badge — base --amber #fbd607). */
    --soofos-overlay-amber-15: rgba(251, 214, 7, .15);

    /* Marquee edge-fade mask (home category marquee). Colour + fade stops
     * extracted so the geometry is token-driven, not hardcoded. */
    --soofos-marquee-fade-color: #000; /* mask paint colour (any opaque colour reveals) */
    --soofos-marquee-fade-start: 6%; /* left fade-in stop */
    --soofos-marquee-fade-end: 94%; /* right fade-out stop */
}