/* Fitness — "Electric Glass" theme shared with myhub.
   Colors are RGB channels so they work both here and in Tailwind (rgb(var(--x) / a)).
   Fitness keeps its own coral accent; teal/violet/pink come from myhub. */

:root,
:root.dark {
    color-scheme: dark;
    --fx-bg-app: 11 19 38;          /* #0b1326 */
    --fx-bg-content: 23 31 51;      /* #171f33 */
    --fx-bg-menu: 19 27 46;         /* #131b2e */
    --fx-inset: 11 19 38;
    --fx-line: 255 255 255;
    --fx-line-a: 0.12;

    --fx-text-strong: 241 245 255;
    --fx-text-1: 218 226 253;       /* #dae2fd */
    --fx-text-2: 185 202 196;       /* #b9cac4 */
    --fx-text-3: 140 155 172;

    --fx-accent: 255 92 99;         /* Fitness coral */
    --fx-teal: 0 245 212;           /* myhub accent */
    --fx-violet: 155 93 229;        /* myhub secondary */
    --fx-pink: 241 91 181;          /* myhub tertiary */
    --fx-gold: 255 200 87;
    --fx-green: 52 211 153;

    --fx-on-fill: 11 19 38;         /* text on accent / teal / gold fills */

    --glass-bg: rgb(var(--fx-bg-content) / 0.62);
    --glass-border: rgb(255 255 255 / 0.12);
    --chrome-bg: rgb(var(--fx-bg-menu) / 0.72);
    --scrim: rgb(0 0 0 / 0.5);

    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.22);
}

:root.light {
    color-scheme: light;
    --fx-bg-app: 238 244 248;       /* #eef4f8 */
    --fx-bg-content: 255 255 255;
    --fx-bg-menu: 232 238 245;
    --fx-inset: 238 244 248;
    --fx-line: 61 86 115;
    --fx-line-a: 0.2;

    --fx-text-strong: 12 25 41;     /* #0c1929 */
    --fx-text-1: 30 45 66;
    --fx-text-2: 61 86 115;         /* #3d5673 */
    --fx-text-3: 92 110 133;

    --fx-accent: 220 38 52;
    --fx-teal: 15 118 110;          /* #0f766e */
    --fx-violet: 109 40 217;
    --fx-pink: 219 39 119;
    --fx-gold: 180 83 9;
    --fx-green: 4 120 87;

    --fx-on-fill: 255 255 255;

    --glass-bg: rgb(255 255 255 / 0.72);
    --glass-border: color-mix(in srgb, rgb(var(--fx-teal)) 18%, #ffffff);
    --chrome-bg: rgb(245 248 251 / 0.78);
    --scrim: rgb(15 23 42 / 0.28);
    --shadow-md: 0 4px 16px rgb(15 23 42 / 0.08);
}

/* ---------- Base ---------- */
body {
    background-color: rgb(var(--fx-bg-app));
    background-image:
        radial-gradient(circle at 12% 20%, rgb(var(--fx-teal) / 0.13) 0%, transparent 45%),
        radial-gradient(circle at 88% 30%, rgb(var(--fx-violet) / 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgb(var(--fx-accent) / 0.08) 0%, transparent 55%);
    background-attachment: fixed;
    color: rgb(var(--fx-text-1));
    font-family: 'Hanken Grotesk', sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.light body {
    background-image:
        radial-gradient(circle at 12% 20%, rgb(var(--fx-teal) / 0.1) 0%, transparent 50%),
        radial-gradient(circle at 88% 25%, rgb(var(--fx-violet) / 0.08) 0%, transparent 50%);
}

h1, h2, h3, h4, h5, h6,
.heading-font {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Section titles: uppercase keeps the sporty tone; Jakarta is wider than Teko,
   so the old Teko sizes are scaled down. */
.heading-font {
    font-weight: 800;
    letter-spacing: 0.01em;
}
.heading-font.text-3xl { font-size: 1.5rem; line-height: 1.15; }
.heading-font.text-2xl { font-size: 1.125rem; line-height: 1.25; }
@media (min-width: 640px) {
    .heading-font.text-3xl { font-size: 1.75rem; }
    .heading-font.text-2xl { font-size: 1.25rem; }
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--fx-text-2) / 0.45) transparent;
}
.custom-scrollbar::-webkit-scrollbar,
*::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track,
*::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: rgb(var(--fx-text-2) / 0.4);
    border-radius: var(--radius-sm);
}
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--fx-text-2) / 0.6); }

/* ---------- Surfaces ---------- */
.card-gradient,
.glass-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card-gradient,
    .glass-card { background: rgb(var(--fx-bg-content)); }
}

/* Highlighted card (rutina actual) */
.glow-effect {
    box-shadow: var(--shadow-md), 0 0 24px rgb(var(--fx-gold) / 0.12);
}
.glow-cyan {
    box-shadow: var(--shadow-md), 0 0 24px rgb(var(--fx-teal) / 0.14);
}

.glass-chrome {
    background: var(--chrome-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-solid {
    background: rgb(var(--fx-bg-menu) / 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.panel-footer {
    background: rgb(var(--fx-bg-app) / 0.6);
}

/* Soft seam under the header, like myhub's chrome */
.chrome-seam-bottom {
    position: relative;
    border-bottom: none !important;
}
.chrome-seam-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(var(--fx-teal) / 0.22) 18%,
        rgb(var(--fx-line) / 0.1) 50%,
        rgb(var(--fx-accent) / 0.18) 82%,
        transparent 100%);
}

.brand-logo {
    background: linear-gradient(135deg, rgb(var(--fx-accent)) 0%, rgb(var(--fx-pink)) 100%);
    color: #fff;
    box-shadow: 0 0 18px rgb(var(--fx-accent) / 0.3);
}

/* ---------- Buttons ---------- */
.btn-accent,
.btn-gold,
.btn-teal {
    color: rgb(var(--fx-on-fill));
    border: 1px solid transparent;
    font-weight: 700;
    transition: filter 0.1s ease, box-shadow 0.1s ease;
}
.btn-accent {
    background: rgb(var(--fx-accent));
    box-shadow: 0 0 8px rgb(var(--fx-accent) / 0.22);
}
.btn-accent:hover { filter: brightness(1.06); box-shadow: 0 0 12px rgb(var(--fx-accent) / 0.34); }
.btn-gold {
    background: rgb(var(--fx-gold));
    box-shadow: 0 0 8px rgb(var(--fx-gold) / 0.2);
}
.btn-gold:hover { filter: brightness(1.06); box-shadow: 0 0 12px rgb(var(--fx-gold) / 0.32); }
.btn-teal {
    background: rgb(var(--fx-teal));
    box-shadow: 0 0 8px rgb(var(--fx-teal) / 0.22);
}
.btn-accent:active,
.btn-gold:active,
.btn-teal:active { filter: brightness(0.94); }

.btn-ghost {
    background: var(--glass-bg);
    color: rgb(var(--fx-text-1));
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover {
    color: rgb(var(--fx-text-strong));
    border-color: rgb(var(--fx-teal) / 0.45);
    background: color-mix(in srgb, rgb(var(--fx-teal)) 8%, var(--glass-bg));
}

.btn-accent:focus-visible,
.btn-gold:focus-visible,
.btn-teal:focus-visible,
.btn-ghost:focus-visible,
.filter-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--fx-teal) / 0.45);
}

.filter-chip { transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.filter-chip.active {
    border-color: transparent;
    background: rgb(var(--fx-teal));
    color: rgb(var(--fx-on-fill));
    box-shadow: 0 0 10px rgb(var(--fx-teal) / 0.25);
}

.rutina-tab.active {
    border-color: rgb(var(--fx-gold) / 0.45);
    background: rgb(var(--fx-gold) / 0.12);
    color: rgb(var(--fx-gold));
}

.badge-latest {
    background: linear-gradient(90deg, rgb(var(--fx-accent)) 0%, rgb(var(--fx-pink)) 100%);
    color: #fff;
}

/* ---------- Inputs ---------- */
.input-field,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-field {
    background: var(--glass-bg);
    color: rgb(var(--fx-text-strong));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.light .input-field { background: rgb(255 255 255 / 0.85); }
.input-field:hover { border-color: rgb(var(--fx-text-2) / 0.5); }
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.input-field:focus {
    outline: none;
    border-color: rgb(var(--fx-teal) / 0.7) !important;
    box-shadow: 0 0 0 2px rgb(var(--fx-teal) / 0.25);
}
select option {
    background: rgb(var(--fx-bg-content));
    color: rgb(var(--fx-text-1));
}

/* ---------- Overlays ---------- */
.modal-backdrop {
    background: var(--scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-panel.card-gradient {
    background: rgb(var(--fx-bg-content) / 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ---------- Calendar ---------- */
.cal-dow { color: rgb(var(--fx-text-3)); }
.cal-day {
    border-color: rgb(var(--fx-line) / var(--fx-line-a));
    background: rgb(var(--fx-inset) / 0.7);
    color: rgb(var(--fx-text-1));
}
.cal-day:hover:not(.empty):not(:disabled) { border-color: rgb(var(--fx-gold)); }
.cal-day.today { box-shadow: inset 0 0 0 1px rgb(var(--fx-gold)); }
.cal-day.selected {
    border-color: rgb(var(--fx-teal));
    box-shadow: 0 0 0 1px rgb(var(--fx-teal) / 0.35);
}
/* Rutina colors are bright; darken their text in light mode for contrast */
.light .cal-day.rutina-mark,
.light .cal-choice.rutina-btn {
    color: color-mix(in srgb, rgb(var(--rc)) 55%, rgb(var(--fx-text-strong)));
}
.light .cal-day.rutina-other {
    color: color-mix(in srgb, rgb(var(--rc)) 45%, rgb(var(--fx-text-2)));
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* App title in the header: shrinks on phones so the header never scrolls sideways */
.app-title { font-size: clamp(1rem, 4.6vw, 1.75rem); }