/* ============================================================
   CODECRAFTCO BRAND PALETTE
   ============================================================
   Taken verbatim from the two pages that define the look:

     shop      templates/minimarket/customer/customer_base.html
     dashboard templates/minimarket/staff/dashboard.html
               + static/css/staff-dark.css

   Nothing here is invented. The signup, pricing and public pages had
   been built on their own green scheme (#16a34a) while every other
   screen is blue (#3b82f6), so the brand changed colour mid-journey.
   This file removes that.

   THE TWO LIGHT MODES ARE DELIBERATELY DIFFERENT
   The shop is warm (#faf8f5, brown-grey text) — it is a storefront.
   The staff screens are cool (#f8fafc, slate text) — they are tools.
   Both share #3b82f6 and the same dark mode. Flattening them into one
   would change the look of pages the user did not ask to change.

     default        shop / customer / marketing  (warm)
     .brand-staff   staff and admin screens      (cool)

   DARK MODE
   Two selectors, because the platform already has two mechanisms and
   both must keep working:

     body.dark-theme            shop      (localStorage 'codecraftco_theme')
     :root[data-theme="dark"]   staff     (localStorage 'theme')

   Supporting both means a page picks up whichever preference the
   visitor already set, rather than resetting to light.
   ============================================================ */

/* ── LIGHT · shop / marketing (warm boutique) ───────────────── */
:root {
    --background:      #faf8f5;
    --surface:         #ffffff;
    --surface-hover:   #f5f2ed;
    --surface-alt:     #e8e4dd;
    --border-color:    #e8e4dd;
    --text-primary:    #2d2520;
    --text-secondary:  #6b5d52;
    --text-tertiary:   #9d8f82;

    --primary-color:   #3b82f6;
    --primary-hover:   #2563eb;
    --primary-light:   rgba(59, 130, 246, 0.1);

    --success-color:   #10b981;
    --success-hover:   #059669;
    --success-light:   rgba(16, 185, 129, 0.1);

    --warning-color:   #f59e0b;
    --warning-hover:   #d97706;
    --warning-light:   rgba(245, 158, 11, 0.1);

    --danger-color:    #ef4444;
    --danger-hover:    #dc2626;
    --danger-light:    rgba(239, 68, 68, 0.1);

    --info-color:      #06b6d4;
    --info-light:      rgba(6, 182, 212, 0.1);

    /* The install-app button keeps its original green. It is the one
       call-to-action that should not read as "just another button", and
       the deeper green stands out against the blue UI. */
    --install-color:   #16a34a;
    --install-hover:   #15803d;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  12px;
    --radius-full: 50%;

    --transition-fast:   0.15s ease;
    --transition-normal: 0.3s ease;

    --shadow:    0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 8px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 20px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 32px rgba(0,0,0,.12);
}

/* ── LIGHT · staff / admin (cool slate) ─────────────────────── */
.brand-staff {
    --background:      #f8fafc;
    --surface:         #ffffff;
    --surface-hover:   #f1f5f9;
    --surface-alt:     #f8fafc;
    --border-color:    #e2e8f0;
    --border-hover:    #cbd5e1;
    --text-primary:    #0f172a;
    --text-secondary:  #475569;
    --text-tertiary:   #64748b;
    --text-muted:      #94a3b8;
}

/* ── DARK · shop mechanism ──────────────────────────────────── */
body.dark-theme {
    --background:      #1e293b;
    --surface:         #334155;
    --surface-hover:   #475569;
    --surface-alt:     #64748b;
    --border-color:    #475569;
    --text-primary:    #f8fafc;
    --text-secondary:  #cbd5e1;
    --text-tertiary:   #94a3b8;

    --primary-light:   rgba(59, 130, 246, 0.15);
    --success-light:   rgba(16, 185, 129, 0.15);
    --warning-light:   rgba(245, 158, 11, 0.15);
    --danger-light:    rgba(239, 68, 68, 0.15);
    --info-light:      rgba(6, 182, 212, 0.15);

    --shadow:    0 2px 4px -1px rgba(0,0,0,.3), 0 1px 2px -1px rgba(0,0,0,.2);
    --shadow-md: 0 6px 10px -2px rgba(0,0,0,.3), 0 3px 4px -1px rgba(0,0,0,.2);
    --shadow-lg: 0 12px 20px -4px rgba(0,0,0,.4), 0 6px 8px -2px rgba(0,0,0,.3);
    --shadow-xl: 0 20px 32px -6px rgba(0,0,0,.5);
}

/* ── DARK · staff mechanism ─────────────────────────────────── */
/* Matches staff-dark.css exactly: page, cards and footer share one
   slate, separated by borders rather than by surface contrast. */
:root[data-theme="dark"],
[data-theme="dark"] {
    --background:      #1e293b;
    --surface:         #1e293b;
    --surface-hover:   #334155;
    --surface-alt:     #172130;
    --border-color:    #334155;
    --border-hover:    #475569;
    --text-primary:    #f1f5f9;
    --text-secondary:  #cbd5e1;
    --text-tertiary:   #94a3b8;
    --text-muted:      #64748b;

    --primary-light:   rgba(59, 130, 246, 0.15);
    --success-light:   rgba(16, 185, 129, 0.15);
    --warning-light:   rgba(245, 158, 11, 0.15);
    --danger-light:    rgba(239, 68, 68, 0.15);

    --shadow:    0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 8px rgba(0,0,0,.4);
    --shadow-lg: 0 12px 20px rgba(0,0,0,.5);
    --shadow-xl: 0 20px 32px rgba(0,0,0,.6);
}

/* ── Short aliases ──────────────────────────────────────────── */
/* The newer pages were written against shorter names. Mapping them
   keeps those pages working and stops a second palette reappearing
   under a different vocabulary. */
:root,
.brand-staff,
body.dark-theme,
:root[data-theme="dark"] {
    --primary:      var(--primary-color);
    --primary-dark: var(--primary-hover);
    --accent:       var(--primary-color);
    --bg:           var(--background);
    --text:         var(--text-primary);
    --text-2:       var(--text-secondary);
    --text-3:       var(--text-tertiary);
    --border:       var(--border-color);
    --success:      var(--success-color);
    --warning:      var(--warning-color);
    --danger:       var(--danger-color);
}

/* ── The real logo ──────────────────────────────────────────── */
/* Copied verbatim from staff-shell.css:75-113 — the dashboard header
   mark. A plain blue "C" square was invented here previously; it was
   not the brand. These are the same class names staff-shell.css uses,
   so partials/_logo.html renders identically on any page that loads
   this file. Staff pages load staff-shell.css instead of brand.css,
   so the two definitions never meet. */

.cc-logo-link { text-decoration: none; display: inline-flex; align-items: center; }

.logo-container {
    display: flex;
    align-items: center;
    gap: 3px;
    transform: scale(var(--logo-scale, 0.7));
    transform-origin: left center;
}

.word { display: flex; align-items: center; gap: 2px; }

.letter-box {
    width: 24px;
    height: 24px;
    background-color: rgba(51, 51, 51, 0.95);
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.letter-box.red    { box-shadow: 0 0 6px rgba(255, 0, 0, .5),   0 0 12px rgba(255, 0, 0, .3); }
.letter-box.blue   { box-shadow: 0 0 6px rgba(0, 153, 255, .5), 0 0 12px rgba(0, 153, 255, .3); }
.letter-box.orange { box-shadow: 0 0 6px rgba(255, 136, 0, .5), 0 0 12px rgba(255, 136, 0, .3); }

.letter {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    font-family: Arial, sans-serif;
}

.word-text {
    font-size: 13px;
    color: var(--text-primary);
    margin-left: 2px;
    font-family: Arial, sans-serif;
    font-weight: 600;
}

body {
    background: var(--background);
    color: var(--text-primary);
    transition: background var(--transition-normal),
                color var(--transition-normal);
}

@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
}