/* ============================================================
 * Techbly Central Color Scheme — v3.0
 * Modern Tech Palette
 *
 *  Electric Blue  #0052FF  → Primary   (headers, brand, active links, buttons)
 *  Ghost White    #F8FAFC  → Secondary (page backgrounds)
 *  Modern Teal    #00C49A  → Accent    (CTA, success, badges)
 *  Slate Black    #1E293B  → Typography (titles, body, nav text)
 *
 * All three layouts (app, hire, shop) load this file first.
 * To rebrand: edit the four brand values below — every page updates.
 * ============================================================ */

:root {
    /* ── Core brand tokens ───────────────────────────────── */
    --blue:        #0052FF;   /* Electric Blue  — primary   */
    --blue-dark:   #0041cc;
    --blue-darker: #0031a0;
    --blue-light:  #3374ff;
    --blue-lighter:#6699ff;
    --blue-50:     #eef3ff;
    --blue-100:    #d6e4ff;
    --blue-200:    #adc8ff;

    --teal:        #00C49A;   /* Modern Teal    — accent    */
    --teal-dark:   #009e7b;
    --teal-light:  #33d3b0;
    --teal-50:     #e6faf6;
    --teal-100:    #b3f0e2;

    --ghost:       #F8FAFC;   /* Ghost White    — background */
    --ghost-dark:  #f1f5f9;

    --slate:       #1E293B;   /* Slate Black    — typography */
    --slate-light: #334155;
    --slate-muted: #64748b;
    --slate-subtle:#94a3b8;

    /* ── Semantic aliases used across all layouts ─────────── */
    --color-primary:        var(--blue);
    --color-primary-dark:   var(--blue-dark);
    --color-primary-darker: var(--blue-darker);
    --color-primary-light:  var(--blue-light);
    --color-primary-bg:     var(--blue-50);
    --color-primary-border: var(--blue-200);
    --color-on-primary:     #ffffff;

    --color-accent:         var(--teal);
    --color-accent-dark:    var(--teal-dark);
    --color-accent-bg:      var(--teal-50);
    --color-on-accent:      #ffffff;

    --color-bg:             var(--ghost);
    --color-bg-alt:         var(--ghost-dark);
    --color-bg-muted:       var(--blue-50);

    --color-text:           var(--slate);
    --color-text-secondary: var(--slate-light);
    --color-text-muted:     var(--slate-muted);
    --color-text-subtle:    var(--slate-subtle);

    --color-border:         #e2e8f0;
    --color-border-focus:   var(--blue);

    --color-success:        var(--teal);
    --color-warning:        #f59e0b;
    --color-danger:         #ef4444;

    /* ── Hire layout tokens (was purple) ──────────────────── */
    --service-primary:      var(--blue);
    --service-primary-d:    var(--blue-dark);
    --service-dark:         var(--blue-darker);

    /* ── Shop layout tokens (was orange) ──────────────────── */
    --shop-primary:         var(--blue);
    --shop-primary-d:       var(--blue-dark);
    --shop-dark:            var(--blue-darker);
    --shop-orange:          var(--blue);      /* legacy var name, now blue */
    --shop-orange-d:        var(--blue-dark);

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-primary: 0 4px 14px rgba(0,82,255,.20);
    --shadow-accent:  0 4px 14px rgba(0,196,154,.20);
    --shadow-sm:      0 1px 3px rgba(30,41,59,.07),  0 1px 2px rgba(30,41,59,.04);
    --shadow-md:      0 4px 16px rgba(30,41,59,.10),  0 2px 6px rgba(30,41,59,.05);
    --shadow-lg:      0 10px 32px rgba(30,41,59,.12), 0 4px 12px rgba(30,41,59,.07);
    --shadow-xl:      0 20px 48px rgba(30,41,59,.15), 0 8px 18px rgba(30,41,59,.09);

    --radius:    .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;

    --transition: 150ms ease-in-out;
}

/* ═══════════════════════════════════════════════════════════
   BASE — applied globally across all layouts
═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    background-color: var(--color-bg);        /* Ghost White #F8FAFC */
    color: var(--color-text);                 /* Slate Black #1E293B */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }

/* ── Focus ring ───────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--blue-50); }
::-webkit-scrollbar-thumb  { background: var(--blue-200); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-light); }

/* ── Form focus ───────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(0,82,255,.15) !important;
}

/* ═══════════════════════════════════════════════════════════
   COMPONENT UTILITIES
═══════════════════════════════════════════════════════════ */

/* Primary button — Electric Blue */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border: 1px solid var(--color-primary);
    transition: background-color var(--transition), box-shadow var(--transition);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
    color: var(--color-on-primary);
}

/* Accent button — Modern Teal */
.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    border: 1px solid var(--color-accent);
    transition: background-color var(--transition), box-shadow var(--transition);
}
.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    box-shadow: var(--shadow-accent);
    color: var(--color-on-accent);
}

/* Outline primary */
.btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    transition: background-color var(--transition), color var(--transition);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* Badges */
.badge-primary {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-border);
}
.badge-accent {
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
}

/* Nav active link */
.nav-link.active,
.nav-link:hover { color: var(--color-primary) !important; }

/* Sidebar active */
.sidebar-link.active,
.sidebar-link:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    border-left: 3px solid var(--color-primary);
}

/* Cards */
.card {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* ── Background helpers ───────────────────────────────────── */
.bg-brand         { background-color: var(--color-primary); }
.bg-brand-soft    { background-color: var(--color-primary-bg); }
.bg-accent        { background-color: var(--color-accent); }
.bg-accent-soft   { background-color: var(--color-accent-bg); }
.bg-ghost         { background-color: var(--ghost); }

/* ── Typography helpers ───────────────────────────────────── */
.text-brand       { color: var(--color-primary) !important; }
.text-accent      { color: var(--color-accent) !important; }
.text-slate       { color: var(--slate) !important; }
.text-muted       { color: var(--color-text-muted) !important; }

/* ── Border helpers ───────────────────────────────────────── */
.border-brand     { border-color: var(--color-primary) !important; }
.border-accent    { border-color: var(--color-accent) !important; }

/* ── Gradient helpers ─────────────────────────────────────── */
.bg-brand-hero {
    background: linear-gradient(135deg, var(--blue-darker) 0%, var(--blue-dark) 55%, var(--blue) 100%);
}
.bg-brand-card {
    background: linear-gradient(145deg, var(--blue-darker) 0%, var(--blue-dark) 100%);
}
.bg-teal-hero {
    background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
}