/* ==============================================
   CORE VARIABLES & DESIGN TOKENS
   ============================================== */
/* Read this file top-down:
   1. Primitive tokens: raw palette and one-off source values.
   2. Semantic tokens: the app-facing contract for surfaces, text, status, spacing, and layout.
   3. Compatibility aliases: older names kept for existing consumers.

   New CSS should prefer semantic tokens such as --bg-*, --text-*, --surface-*,
   --space-*, and the shared card/layout tokens. */

:root {
    color-scheme: dark;

    /* ==============================================
       BROWSER CHROME
       ============================================== */
    --browser-theme-color: #000000;
    --browser-tile-color: #000000;

    /* ==============================================
       PRIMITIVE COLOR TOKENS
       Use these as source values. Prefer semantic tokens below in app CSS.
       ============================================== */
    --color-information: hsl(210 100% 50%);
    --color-success: hsl(148 100% 50%);
    --color-error: hsl(10 100% 50%);
    --color-warning: hsl(60 100% 50%);
    --color-accent: hsl(22 100% 50%);

    --color-dark-text: #141414;
    --color-mono-strong: #141414;
    --color-mono-light: hsl(0 0% 95%);

    /* Context-specific raw palette values kept centralized here. */
    --color-workout-manual-surface: #5d3fd3;
    --color-category-calisthenics-banner: hsl(347 100% 50%);
    --color-category-mobility-banner: hsl(271 100% 50%);
    --color-category-endurance-banner: hsl(211 100% 50%);
    --color-category-lifting-banner: hsl(22 100% 50%);
    --color-illustration-calisthenics-bg: hsl(348 100% 94%);
    --color-illustration-cardio-bg: hsl(200 100% 92%);
    --color-illustration-lifting-bg: hsl(36 100% 92%);
    --color-illustration-mobility-bg: hsl(255 100% 95%);
    --color-heatmap-calisthenics-100: var(--color-illustration-calisthenics-bg);
    --color-heatmap-calisthenics-200: hsl(347 100% 88%);
    --color-heatmap-calisthenics-300: hsl(347 100% 79%);
    --color-heatmap-calisthenics-400: hsl(347 100% 67%);
    --color-heatmap-calisthenics-600: var(--color-category-calisthenics-banner);
    --color-heatmap-cardio-100: var(--color-illustration-cardio-bg);
    --color-heatmap-cardio-200: hsl(200 100% 85%);
    --color-heatmap-cardio-300: hsl(198 100% 76%);
    --color-heatmap-cardio-400: hsl(199 100% 64%);
    --color-heatmap-cardio-600: hsl(208 100% 51%);
    --color-heatmap-mobility-100: var(--color-illustration-mobility-bg);
    --color-heatmap-mobility-200: hsl(255 100% 93%);
    --color-heatmap-mobility-300: hsl(260 100% 83%);
    --color-heatmap-mobility-400: hsl(263 100% 73%);
    --color-heatmap-mobility-600: hsl(270 100% 54%);
    --color-heatmap-lifting-100: var(--color-illustration-lifting-bg);
    --color-heatmap-lifting-200: hsl(34 100% 82%);
    --color-heatmap-lifting-300: hsl(32 100% 71%);
    --color-heatmap-lifting-400: hsl(28 100% 60%);
    --color-heatmap-lifting-600: var(--color-category-lifting-banner);

    /* ==============================================
       SEMANTIC SURFACE TOKENS
       These are the default app surface layers.
       ============================================== */
    --bg-primary: hsl(0 0% 0%);
    --bg-secondary: hsl(0 0% 5%);
    --bg-tertiary: hsl(0 0% 10%);
    --border-color: hsl(0 0% 20%);
    --bg-accent: color-mix(in srgb, var(--color-information) 18%, transparent);

    /* ==============================================
       SEMANTIC TEXT TOKENS
       ============================================== */
    --text-primary: hsl(0 0% 95%);
    --text-muted: hsl(0 0% 70%);
    --text-placeholder: hsl(0 0% 50%);
    --text-blocked: hsl(0 0% 30%);
    --text-accent: var(--color-information);
    --text-on-accent: var(--text-primary);

    /* ==============================================
       DERIVED SURFACE HELPERS
       These intentionally build on the semantic surface and text layers above.
       ============================================== */
    --color-hover: var(--bg-tertiary);
    --color-active: var(--bg-tertiary);

    --color-error-soft: color-mix(in srgb, var(--color-error) 22%, transparent);
    --color-error-strong: color-mix(in srgb, var(--color-error) 50%, transparent);
    --color-information-soft: color-mix(in srgb, var(--color-information) 22%, transparent);
    --color-information-strong: color-mix(in srgb, var(--color-information) 35%, transparent);
    --color-warning-soft: color-mix(in srgb, var(--color-warning) 22%, transparent);
    --color-success-soft: color-mix(in srgb, var(--color-success) 22%, transparent);

    --color-overlay-strong: color-mix(in srgb, var(--bg-primary) 50%, transparent);
    --color-overlay-muted: color-mix(in srgb, var(--bg-primary) 40%, transparent);
    --color-surface-muted: color-mix(in srgb, var(--text-primary) 5%, transparent);
    --color-surface-subtle: color-mix(in srgb, var(--text-primary) 8%, transparent);
    --color-surface-emphasis: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --color-surface-strong: color-mix(in srgb, var(--text-primary) 20%, transparent);
    --color-surface-stronger: color-mix(in srgb, var(--text-primary) 30%, transparent);
    --color-surface-overlay: color-mix(in srgb, var(--bg-tertiary) 94%, transparent);
    --color-modal-backdrop: var(--color-overlay-muted);
    --color-modal-backdrop-strong: color-mix(in srgb, var(--bg-primary) 70%, transparent);

    /* Shared status surface pairs for buttons, tabs, notifications, and badges. */
    --surface-error-bg: var(--color-error-soft);
    --surface-error-text: var(--color-error);
    --surface-success-bg: hsl(150 86% 20%);
    --surface-success-text: var(--color-success);
    --surface-completed-bg: var(--surface-success-bg);
    --surface-completed-text: var(--surface-success-text);
    --surface-warning-bg: hsl(48 77% 24%);
    --surface-warning-text: var(--color-warning);

    /* ==============================================
       FEATURE-LEVEL SEMANTIC TOKENS
       Keep these centralized so features do not recreate local palettes.
       ============================================== */
    --color-calendar-workout: var(--color-accent);
    --color-calendar-workout-today: var(--color-error);

    --memory-note-bg-preferences: var(--bg-tertiary);
    --memory-note-bg-injury: #fad7d7;
    --memory-note-bg-pending: #abafff;
    --memory-note-bg-applied: #a0e1fb;
    --memory-note-bg-rejected: #f3ee59;
    --memory-note-text-preferences: var(--text-primary);
    --memory-note-text-injury: var(--bg-primary);
    --memory-note-text-pending: var(--bg-primary);
    --memory-note-text-applied: var(--bg-primary);
    --memory-note-text-rejected: var(--bg-primary);
    --memory-note-meta-text: var(--bg-primary);
    --memory-note-follow-up-text: hsl(20 100% 71%);
    --memory-note-pending-text: hsl(63 100% 64%);
    --memory-note-applied-text: hsl(148 100% 72%);
    --memory-note-rejected-text: hsl(10 100% 50%);

    /* ==============================================
       SHAPE TOKENS
       ============================================== */
    --radius-pill: 1000px;
    --radius-standard: 20px;
    --radius-buttons: 0.75rem;

    /* Modal-specific compatibility aliases. Prefer semantic surface/text tokens in new work. */
    --modal-text-white: var(--text-primary);
    --modal-element-bg: color-mix(in srgb, var(--text-primary) 6%, transparent);
    --modal-element-bg-hover: color-mix(in srgb, var(--text-primary) 50%, transparent);

    /* ==============================================
       SPACING TOKENS
       ============================================== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* ==============================================
       TYPOGRAPHY TOKENS
       ============================================== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --text-3xl: 40px;
    --text-xl: 20px;
    --text-base: 16px;
    --text-sm: 14px;
    --text-xs: 12px;
    --text-xxs: 10px;

    --line-height-giant-titles: 1;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ==============================================
       MOTION TOKENS
       ============================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;

    /* ==============================================
       LAYER TOKENS
       ============================================== */
    --z-base: 1;
    --z-header: 100;
    --z-dropdown: 500;
    --z-modal-backdrop: 10000;
    --z-modal: 10001;
    --z-modal-stacked: 10002;

    /* ==============================================
       SAFE AREA TOKENS
       Keep these above layout tokens that reference them.
       ============================================== */
    /* --cap-safe-area-bottom is injected by the Android native layer as a
       fallback for Samsung WebViews that do not expose env() reliably in
       edge-to-edge mode (targetSdk 35+). */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--cap-safe-area-bottom, 0px));
    --safe-area-left: env(safe-area-inset-left, 0px);

    /* ==============================================
       LAYOUT AND CARD TOKENS
       ============================================== */
    --spa-shell-max-width: 900px;
    --spa-shell-max-width-mobile: 420px;
    --spa-shell-inset-inline-desktop: var(--space-lg);
    --spa-shell-inset-inline-mobile: var(--space-md);
    --spa-chrome-inline-padding: var(--space-sm);
    --spa-shell-inset-top-desktop: var(--safe-area-top);
    --spa-shell-inset-top-mobile: calc(16px + var(--safe-area-top));
    --spa-shell-inset-top-mobile-back-button: calc(56px + var(--safe-area-top));
    --spa-shell-inset-bottom-desktop: var(--space-lg);
    --spa-shell-inset-bottom-mobile: var(--space-2xl);
    --spa-shell-inset-bottom-footer-nav: calc(var(--footer-height) + var(--safe-area-bottom) + var(--space-md));

    /* Canonical home card-row system. */
    --u: 0.8125rem;
    --card-radius: var(--radius-buttons);
    --card-hero-width: calc(27 * var(--u));
    --card-hero-height: calc(16 * var(--u));
    --card-square-size: calc(11 * var(--u));
    --card-vertical-width: calc(8 * var(--u));
    --card-vertical-height: calc(11 * var(--u));

    /* Shared card sizing outside the home card-row system. */
    --square-card-size: 180px;
    --square-card-max-width-mobile: 180px;
    --card-standard-width: 160px;
    --card-standard-height: 220px;
    --workouts-timeline-card-size: clamp(17rem, 73vw, 18.75rem);
    --workouts-timeline-thumbnail-height: calc(var(--workouts-timeline-card-size) * 0.4666667);
    --workouts-timeline-row-bleed: var(--space-sm);
    --milestones-list-illustration-width: 145px;
    --milestones-list-illustration-height: 200px;

    /* Compatibility aliases. Keep for existing consumers, avoid in new CSS. */
    --skill-card-size: var(--square-card-size);
    --home-card-width: var(--card-standard-width);
    --home-card-height: var(--card-standard-height);
    --workout-card-width: var(--workouts-timeline-card-size);
    --workout-card-height: var(--workouts-timeline-card-size);
}

/* Older iOS fallback uses constant() instead of env() */
@supports (padding: constant(safe-area-inset-top)) {
    :root {
        --safe-area-top: constant(safe-area-inset-top);
        --safe-area-right: constant(safe-area-inset-right);
        --safe-area-bottom: constant(safe-area-inset-bottom);
        --safe-area-left: constant(safe-area-inset-left);
    }
}

@media (min-width: 768px) {
    :root {
        --u: 1rem;
    }
}

@media (min-width: 1280px) {
    :root {
        --u: 1.25rem;
    }
}