/*
 * Fitly Design Tokens (fitly-tokens.css)
 * ═══════════════════════════════════════
 * Loaded AFTER bootstrap.min.css. Overrides Bootstrap 5.3 CSS custom
 * properties to establish the Fitly brand.
 *
 * RULES
 * 1. Use --bs-* names when Bootstrap defines the variable.
 * 2. Use --fitly-* for values Bootstrap does not cover.
 * 3. NEVER redefine .btn, .card, .form-control here -- those are Bootstrap.
 */

:root {
    /* ── Brand Colors ─────────────────────────────────────── */
    --bs-primary:           #03A9F5;
    --bs-primary-rgb:       3, 169, 245;
    --bs-secondary:         #6c757d;
    --bs-secondary-rgb:     108, 117, 125;
    --bs-success:           #28a745;
    --bs-success-rgb:       40, 167, 69;
    --bs-danger:            #dc3545;
    --bs-danger-rgb:        220, 53, 69;
    --bs-warning:           #ffc107;
    --bs-warning-rgb:       255, 193, 7;
    --bs-info:              #17a2b8;
    --bs-info-rgb:          23, 162, 184;

    /* ── Surfaces ─────────────────────────────────────────── */
    --bs-body-bg:           #f5f7fa;
    --bs-body-color:        #212529;
    --bs-secondary-bg:      #f8f9fa;
    --bs-tertiary-bg:       #e9ecef;
    --bs-border-color:      #dee2e6;

    /* ── Typography ───────────────────────────────────────── */
    --bs-body-font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI",
                            Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size:    1rem;       /* 16px */
    --bs-body-line-height:  1.5;

    /* ── Border Radius ────────────────────────────────────── */
    --bs-border-radius:     0.75rem;    /* 12px */
    --bs-border-radius-sm:  0.5rem;     /* 8px  */
    --bs-border-radius-lg:  1rem;       /* 16px */
    --bs-border-radius-xl:  1.25rem;    /* 20px */
    --bs-border-radius-pill: 50rem;

    /* ── Card overrides ───────────────────────────────────── */
    --bs-card-border-color: rgba(0, 0, 0, 0.06);
    --bs-card-bg:           #ffffff;

    /* ── Input overrides ──────────────────────────────────── */
    --bs-input-bg:          #ffffff;

    /* ── Link color ───────────────────────────────────────── */
    --bs-link-color:        #03A9F5;
    --bs-link-hover-color:  #0288D1;

    /* ══════════════════════════════════════════════════════════
       Fitly-Only Tokens (no Bootstrap equivalent)
       ══════════════════════════════════════════════════════════ */

    /* Brand color extensions */
    --fitly-primary:            #03A9F5;
    --fitly-primary-dark:       #0288D1;
    --fitly-primary-light:      #4FC3F7;
    --fitly-primary-hover:      #0288D1;
    --fitly-primary-bg:         rgba(3, 169, 245, 0.15);
    --fitly-primary-bg-subtle:  rgba(3, 169, 245, 0.06);

    /* Semantic hover/light variants */
    --fitly-success-hover:  #218838;
    --fitly-success-light:  #d4edda;
    --fitly-success-border: #c3e6cb;
    --fitly-danger-hover:   #c82333;
    --fitly-danger-light:   #f8d7da;
    --fitly-warning-hover:  #e0a800;
    --fitly-warning-light:  #fff3cd;
    --fitly-warning-dark:   #856404;
    --fitly-info-hover:     #138496;
    --fitly-info-light:     #d1ecf1;
    --fitly-secondary-hover:#545b62;

    /* Text extensions */
    --fitly-text-muted:     #868e96;

    /* Surface extensions */
    --fitly-bg-accent:      #f5f7fa;

    /* Border extensions */
    --fitly-border-light:   #e9ecef;
    --fitly-border-dark:    #adb5bd;

    /* Shadows (Bootstrap doesn't have a token scale) */
    --fitly-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.04);
    --fitly-shadow-sm:      0 2px 4px rgba(0, 0, 0, 0.06);
    --fitly-shadow-md:      0 4px 8px rgba(0, 0, 0, 0.08);
    --fitly-shadow-lg:      0 8px 16px rgba(0, 0, 0, 0.12);
    --fitly-shadow-xl:      0 16px 32px rgba(0, 0, 0, 0.16);
    --fitly-shadow-2xl:     0 20px 60px rgba(0, 0, 0, 0.25);

    /* Layout */
    --fitly-app-max-width:  1200px;
    --fitly-header-height:  60px;
    --fitly-tab-bar-height: 64px;
    --fitly-sidebar-width:  240px;

    /* Transitions */
    --fitly-transition-fast:    0.15s ease;
    --fitly-transition-normal:  0.2s ease;
    --fitly-transition-slow:    0.3s ease;

    /* Z-Index scale */
    --fitly-z-dropdown:         1000;
    --fitly-z-sticky:           1020;
    --fitly-z-fixed:            1030;
    --fitly-z-modal-backdrop:   1040;
    --fitly-z-action-sheet:     1050;
    --fitly-z-action-sheet-content: 1051;
    --fitly-z-modal:            10000;
    --fitly-z-modal-high:       10050;
    --fitly-z-popover:          1060;
    --fitly-z-tooltip:          1070;
    --fitly-z-notification:     1080;
    --fitly-z-loading:          10100;

    /* Modal */
    --fitly-modal-backdrop:     rgba(0, 0, 0, 0.6);

    /* Text extensions */
    --fitly-text-inverse:   #ffffff;

    /* Border radius extensions */
    --fitly-border-radius-xs:     4px;
    --fitly-border-radius-xl:     24px;
    --fitly-border-radius-circle: 50%;

    /* Spacing scale */
    --fitly-spacing-xs:   4px;
    --fitly-spacing-sm:   8px;
    --fitly-spacing-md:   12px;
    --fitly-spacing-lg:   16px;
    --fitly-spacing-xl:   20px;
    --fitly-spacing-2xl:  24px;
    --fitly-spacing-3xl:  32px;
    --fitly-spacing-4xl:  40px;
    --fitly-spacing-5xl:  48px;

    /* Typography scale */
    --fitly-font-size-xs:     12px;
    --fitly-font-size-sm:     14px;
    --fitly-font-size-base:   16px;
    --fitly-font-size-lg:     18px;
    --fitly-font-size-xl:     20px;
    --fitly-font-size-2xl:    24px;
    --fitly-font-size-3xl:    30px;
    --fitly-font-size-4xl:    36px;

    --fitly-font-weight-normal:    400;
    --fitly-font-weight-medium:    500;
    --fitly-font-weight-semibold:  600;
    --fitly-font-weight-bold:      700;
    --fitly-font-weight-extrabold: 800;

    --fitly-line-height-tight:    1.25;
    --fitly-line-height-normal:   1.5;
    --fitly-line-height-relaxed:  1.75;

    /* Breakpoints (CSS can't use custom props in media queries, but
       these are useful for JS and documentation) */
    --fitly-breakpoint-sm:    576px;
    --fitly-breakpoint-md:    768px;
    --fitly-breakpoint-lg:    992px;
    --fitly-breakpoint-xl:    1200px;
}

/* ══════════════════════════════════════════════════════════
   Fitly Bootstrap Customizations
   ──────────────────────────────────────────────────────────
   Minimal overrides to make Bootstrap components match the
   Fitly brand. These use Bootstrap class names intentionally.
   ══════════════════════════════════════════════════════════ */

/* Ensure buttons meet mobile touch-target guidelines */
.btn {
    min-height: 44px;
    gap: 0.375rem;
    transition: var(--fitly-transition-normal);
}

/* Brand primary button */
.btn-primary {
    --bs-btn-bg:            var(--bs-primary);
    --bs-btn-border-color:  var(--bs-primary);
    --bs-btn-hover-bg:      var(--fitly-primary-hover);
    --bs-btn-hover-border-color: var(--fitly-primary-hover);
    --bs-btn-active-bg:     var(--fitly-primary-dark);
    --bs-btn-active-border-color: var(--fitly-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color:         var(--bs-primary);
    --bs-btn-border-color:  var(--bs-primary);
    --bs-btn-hover-bg:      var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg:     var(--fitly-primary-hover);
    --bs-btn-active-border-color: var(--fitly-primary-hover);
}

/* Form controls: ensure 48px touch targets and brand focus ring */
.form-control,
.form-select {
    min-height: 48px;
    transition: var(--fitly-transition-normal);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Alert: borderless, rounded to match Fitly style */
.alert {
    border: none;
    border-radius: var(--bs-border-radius);
}

/* Card: subtle shadow */
.card {
    box-shadow: var(--fitly-shadow-sm);
    transition: box-shadow var(--fitly-transition-normal);
}

.card:hover {
    box-shadow: var(--fitly-shadow-md);
}

/* ══════════════════════════════════════════════════════════
   Dark Theme Palette
   ──────────────────────────────────────────────────────────
   Applied when [data-bs-theme="dark"] is on the root <html>.
   Only dark-mode overrides live here. Do NOT rename existing
   tokens (reserved for doc 18).
   ══════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
    /* ── Surfaces ─────────────────────────────────────────── */
    --bs-body-bg:           #121212;
    --bs-body-color:        #e8e8e8;
    --bs-secondary-bg:      #1e1e1e;
    --bs-tertiary-bg:       #2a2a2a;
    --bs-border-color:      rgba(255, 255, 255, 0.12);

    /* ── Cards / Inputs ───────────────────────────────────── */
    --bs-card-bg:           #1e1e1e;
    --bs-card-border-color: rgba(255, 255, 255, 0.08);
    --bs-input-bg:          #1e1e1e;

    /* ── Links ────────────────────────────────────────────── */
    --bs-link-color:        #4fc3f7;
    --bs-link-hover-color:  #81d4fa;

    /* ── Brand ────────────────────────────────────────────── */
    --bs-primary:           #4fc3f7;
    --bs-primary-rgb:       79, 195, 247;
    --fitly-primary:        #4fc3f7;
    --fitly-primary-dark:   #0288d1;
    --fitly-primary-light:  #81d4fa;
    --fitly-primary-hover:  #81d4fa;
    --fitly-primary-bg:     rgba(79, 195, 247, 0.15);
    --fitly-primary-bg-subtle: rgba(79, 195, 247, 0.08);

    /* Semantic semantic light variants for dark mode */
    --fitly-success-light:  rgba(76, 175, 80, 0.15);
    --fitly-success-border: rgba(76, 175, 80, 0.3);
    --fitly-danger-light:   rgba(244, 67, 54, 0.15);
    --fitly-warning-light:  rgba(255, 152, 0, 0.15);
    --fitly-info-light:     rgba(79, 195, 247, 0.15);
    --fitly-bg-accent:      #1a1a1a;
    --fitly-text-muted:     #9e9e9e;
    --fitly-border-light:   rgba(255, 255, 255, 0.06);
    --fitly-border-dark:    rgba(255, 255, 255, 0.2);

    /* ── Backward-compat aliases (dark overrides) ──────────── */
    --background-primary:   var(--bs-card-bg);
    --background-secondary: var(--bs-secondary-bg);
    --background-tertiary:  var(--bs-tertiary-bg);
    --background-accent:    var(--fitly-bg-accent);
    --border-color:         var(--bs-border-color);
    --text-primary:         var(--bs-body-color);
    --text-muted:           var(--fitly-text-muted);
    --primary-color:        var(--bs-primary);
    --primary-light:        var(--fitly-primary-bg);
    --primary-lightest:     var(--fitly-primary-bg-subtle);
    --primary-hover:        var(--fitly-primary-hover);
}