/* =============================================
   THEME.CSS — Maps the palette from root.css
   to actual component styles.

   This is the only file that should know what
   colour a button, form, or status badge is.
   To retheme the site, only this file changes.

   Load order: root.css → theme.css → components.css → colours.css
   ============================================= */


/* =============================================
   GLOBAL / BODY
   ============================================= */

body {
    background-color: var(--zinc-350);
    color:            var(--zinc-950);
}


/* =============================================
   TYPOGRAPHY
   ============================================= */

/*h1 { font-size: var(--font-size-h1); }*/
/*h2 { font-size: var(--font-size-h2); }*/
/*h3 { font-size: var(--font-size-h3); }*/

.text-primary  { color: var(--zinc-850);  }
.text-contrast { color: var(--zinc-100);  }
.text-muted    { color: var(--zinc-500);  }
.text-danger   { color: var(--red-500);   }
.text-success  { color: var(--green-600); }
.text-brand    { color: var(--brand-blue);}


/* =============================================
   LINKS
   ============================================= */

a {
    color: var(--zinc-850);
}

a:hover {
    color: var(--brand-blue);
}


/* =============================================
   BUTTONS
   ============================================= */

.btn {
    border: none;
    cursor: pointer;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--brand-blue);
    color: var(--white);
}
.btn-primary:hover { background-color: var(--blue-700); }

.btn-secondary {
    background-color: var(--blue-700);
    color: var(--white);
}
.btn-secondary:hover { background-color: var(--blue-900); }

.btn-success {
    background-color: var(--green-600);
    color: var(--white);
}
.btn-success:hover { background-color: var(--green-700); }

.btn-danger {
    background-color: var(--red-500);
    color: var(--white);
}
.btn-danger:hover { background-color: var(--red-700); }

.btn-inactive {
    background-color: var(--zinc-400);
    color: var(--white);
}
.btn-inactive:hover { background-color: var(--zinc-500); }

.btn-white {
    background-color: var(--white);
    color: var(--zinc-850);
}
.btn-white:hover { background-color: var(--zinc-50); }

/*.btn-cta {*/
/*    background: linear-gradient(92.83deg, var(--teal-500) 0%, var(--blue-700) 100%);*/
/*    color: var(--white);*/
/*    box-shadow: 0 0 12px var(--teal-600);*/
/*}*/
.btn-cta:hover  { filter: brightness(1.1); }
.btn-cta:active { filter: brightness(0.9); }

.btn-submit {
    background-color: var(--green-500);
    color: var(--zinc-850);
}
.btn-submit:hover { background-color: var(--green-600); }


/* =============================================
   FORMS
   ============================================= */

input,
select,
textarea {
    background-color: var(--zinc-100);
    border: solid 1px var(--zinc-400);
    color: var(--zinc-950);
    border-radius: 4px;
    padding: var(--gap-md) var(--gap-lg);
    font-size: var(--font-size-base);
}

input:focus,
select:focus,
textarea:focus {
    background-color: var(--zinc-50);
    outline: 2px solid var(--brand-blue);
}


/* =============================================
   NAVIGATION / MENU
   ============================================= */

nav, .menu {
    background-color: #1C222E;
    border-bottom: solid 1px rgba(24, 24, 24, 0.90);
    border-top:    solid 1px rgba(255, 255, 255, 0.10);
    color: var(--zinc-50);
}


/* =============================================
   GRID / TABLE ROWS
   ============================================= */

.grid-row:nth-child(odd)  { background-color: var(--zinc-200); }
.grid-row:nth-child(even) { background-color: var(--zinc-300); }


/* =============================================
   STATUS BADGES
   ============================================= */

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.status-pending   { background-color: #f6ec94; color: var(--zinc-900); }
.status-active    { background-color: #b1ebb1; color: var(--zinc-900); }
.status-cancelled { background-color: #fbabab; color: var(--zinc-900); }
.status-refunded  { background-color: #fbabab; color: var(--zinc-900); }


/* =============================================
   CATEGORY LABELS
   Replace colour values with your MFORS categories.
   ============================================= */

.label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--zinc-50);
}

.label-default     { background-color: #85CFEA; }
.label-category-1  { background-color: #DF586A; }   /* e.g. Sport     */
.label-category-2  { background-color: #b5a80a; }   /* e.g. Cruiser   */
.label-category-3  { background-color: #55D6C2; }   /* e.g. Touring   */
.label-category-4  { background-color: #AFA6C9; }   /* e.g. Off-road  */
.label-category-5  { background-color: #82AEDE; }   /* e.g. Scooter   */
.label-category-6  { background-color: #F56476; }   /* e.g. Electric  */
.label-category-7  { background-color: #90c64b; }   /* e.g. Classic   */
.label-category-8  { background-color: #E84FBF; }   /* e.g. Naked     */


/* =============================================
   MENU ICONS (Font Awesome duotone)
   ============================================= */

.fa-duotone { --fa-secondary-opacity: 0.4; }

.icon-user        { --fa-primary-color: #5ca357; }
.icon-home        { --fa-primary-color: #3e5e8a; }
.icon-settings    { --fa-primary-color: #7a314d; }
.icon-favourite   { --fa-primary-color: #b11e1e; }
.icon-listing     { --fa-primary-color: #765bb8; }
.icon-search      { --fa-primary-color: #e65a00; }
.icon-admin       { --fa-primary-color: #dba21b; }
.icon-help        { --fa-primary-color: #2e7232; }
.icon-message     { --fa-primary-color: #1564a8; }
.icon-edit        { --fa-primary-color: #3d78bb; }
.icon-logout      { --fa-primary-color: #cc1955; }
.icon-login       { --fa-primary-color: #89229c; }
.icon-promote     { --fa-primary-color: #7dd008; }
.icon-dashboard   { --fa-primary-color: #00d08b; }
.icon-password    { --fa-primary-color: #d8362a; }
.icon-username    { --fa-primary-color: #36439d; }