/*
 * ============================================================
 *  WORKCAMPCONNECT — MASTER DESIGN SYSTEM
 *  Version: 1.0.0
 *
 *  HOW TO USE THIS FILE:
 *  This is the single source of truth for ALL visual styling
 *  across the entire WorkCampConnect platform. Every color,
 *  font, size, shadow, and spacing value lives here as a
 *  CSS Custom Property (variable).
 *
 *  TO MAKE A SITE-WIDE CHANGE:
 *  Find the variable below, change its value, and save.
 *  That change instantly applies everywhere on the platform.
 *
 *  DO NOT hard-code colors, fonts, or sizes in any other file.
 *  Always reference a variable: color: var(--color-primary);
 * ============================================================
 */

:root {

    /* ============================================================
     *  SECTION 1: BRAND COLORS
     *  These are extracted directly from the WCC logo.
     *  Change these and the entire platform rebrands instantly.
     * ============================================================ */

    /* Primary — Deep Campsite Blue
       Used on: Accent backgrounds, secondary buttons, brand contexts */
    --color-primary:            #1A5270;

    /* Primary Dark — Deeper Blue (hover/active states) */
    --color-primary-dark:       #12394F;

    /* Primary Light — Subtle blue tint (dark-safe) */
    --color-primary-light:      rgba(26, 82, 112, 0.20);

    /* Primary Subtle — Extra-subtle blue for backgrounds */
    --color-primary-subtle:     rgba(26, 82, 112, 0.10);

    /* Accent — Warm Campfire Yellow
       Used on: Primary CTA buttons, badges, highlights, headings */
    --color-accent:             #E8AC25;

    /* Accent Dark — Deep Golden Yellow (hover/active on buttons) */
    --color-accent-dark:        #C8920F;

    /* Accent Light — Subtle gold tint (dark-safe) */
    --color-accent-light:       rgba(232, 172, 37, 0.15);

    /* Nature Green — Pine Tree Green
       Used on: Success messages, active/online badges */
    --color-green:              #438E25;
    --color-green-dark:         #2F6519;
    --color-green-light:        rgba(67, 142, 37, 0.15);

    /* Content Link Color — brighter green for dark background visibility */
    --color-link:               #6abf4a;
    --color-link-hover:         #8fd975;

    /* Fire Red — Campfire Flame Red
       Used on: Error messages, delete buttons, alerts */
    --color-red:                #D92516;
    --color-red-dark:           #A81C10;
    --color-red-light:          rgba(217, 37, 22, 0.15);


    /* ============================================================
     *  SECTION 2: NEUTRAL & UI COLORS
     * ============================================================ */

    --color-bg:                 #0b1e2d;
    --color-surface:            rgba(255, 255, 255, 0.04);
    --color-surface-raised:     rgba(255, 255, 255, 0.06);
    --color-border:             rgba(255, 255, 255, 0.10);
    --color-border-focus:       #E8AC25;
    --color-text:               #FFFFFF;
    --color-text-muted:         rgba(255, 255, 255, 0.6);
    --color-text-on-primary:    #FFFFFF;
    --color-text-on-accent:     #0b1e2d;
    --color-text-on-dark:       #FFFFFF;
    --color-overlay:            rgba(0, 0, 0, 0.65);

    /* ============================================================
     *  SECTION 2B: DARK-SAFE UI COLORS
     *  Bright colors optimized for readability on the dark navy
     *  background. Use these for text, links, badges, and status
     *  indicators — never use --color-primary or --color-*-dark
     *  as text colors (they're invisible on #0b1e2d).
     * ============================================================ */

    /* Action Blue — interactive links, clickable text, focus borders */
    --color-action:             #60a5fa;
    --color-action-deep:        #3b82f6;

    /* Heading Blue — section headings, titles, labels on dark bg
       Replaces --color-primary (#1A5270) for text-color use only.
       Same hue as --color-action but semantically distinct. */
    --color-heading:            #60a5fa;

    /* Text-safe semantic colors — bright enough to read on dark bg */
    --color-text-success:       #6abf4a;
    --color-text-danger:        #f87171;
    --color-text-error:         #ff9a91;
    --color-text-info:          #7ec8e3;
    --color-text-trial:         #5dd3e8;
    --color-text-warning:       #f59e0b;

    /* Extended palette — badges, status indicators, quick-links */
    --color-orange:             #fd7e14;
    --color-purple:             #a78bfa;
    --color-pink:               #f472b6;
    --color-bright-green:       #4ade80;
    --color-soft-red:           #ff6b6b;
    --color-cyan:               #22d3ee;
    --color-teal:               #2dd4bf;
    --color-emerald:            #34d399;
    --color-rose:               #fb7185;
    --color-indigo:             #818cf8;
    --color-slate:              #94a3b8;
    --color-orange-light:       #fb923c;

    /* Status colors — online indicators, solid backgrounds */
    --color-online:             #22c55e;
    --color-bright-green-light: #86efac;
    --color-soft-red-light:     #fca5a5;

    /* Tooltip & overlay surfaces */
    --color-tooltip-bg:         #1e293b;
    --color-tooltip-text:       #f1f5f9;

    /* Text on gold/amber badges */
    --color-text-on-gold:       #1A2B36;


    /* Gray scale — opacity-based for dark theme */
    --color-gray-50:            rgba(255, 255, 255, 0.04);
    --color-gray-100:           rgba(255, 255, 255, 0.06);
    --color-gray-200:           rgba(255, 255, 255, 0.10);
    --color-gray-300:           rgba(255, 255, 255, 0.15);
    --color-gray-400:           rgba(255, 255, 255, 0.4);
    --color-gray-500:           rgba(255, 255, 255, 0.5);
    --color-gray-600:           rgba(255, 255, 255, 0.7);
    --color-gray-700:           #FFFFFF;


    /* ============================================================
     *  SECTION 3: TYPOGRAPHY
     * ============================================================ */

    --font-family-base:         'Inter', 'Segoe UI', Arial, sans-serif;
    --font-family-heading:      'Inter', 'Segoe UI', Arial, sans-serif;
    --font-family-mono:         'Courier New', Courier, monospace;

    --font-size-xs:             0.75rem;
    --font-size-sm:             0.875rem;
    --font-size-base:           1rem;
    --font-size-md:             1.125rem;
    --font-size-lg:             1.25rem;
    --font-size-xl:             1.5rem;
    --font-size-2xl:            1.875rem;
    --font-size-3xl:            2.25rem;
    --font-size-4xl:            3rem;

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

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

    --letter-spacing-tight:     -0.025em;
    --letter-spacing-normal:    0em;
    --letter-spacing-wide:      0.05em;
    --letter-spacing-wider:     0.1em;


    /* ============================================================
     *  SECTION 4: SPACING SCALE
     * ============================================================ */

    --space-1:                  0.25rem;
    --space-2:                  0.5rem;
    --space-3:                  0.75rem;
    --space-4:                  1rem;
    --space-5:                  1.25rem;
    --space-6:                  1.5rem;
    --space-8:                  2rem;
    --space-10:                 2.5rem;
    --space-12:                 3rem;
    --space-16:                 4rem;
    --space-20:                 5rem;
    --space-24:                 6rem;


    /* ============================================================
     *  SECTION 5: BORDER RADIUS
     * ============================================================ */

    --radius-none:              0;
    --radius-sm:                0.25rem;
    --radius-base:              0.5rem;
    --radius-md:                0.75rem;
    --radius-lg:                1rem;
    --radius-xl:                1.5rem;
    --radius-pill:              9999px;
    --radius-circle:            50%;


    /* ============================================================
     *  SECTION 6: SHADOWS
     * ============================================================ */

    --shadow-none:              none;
    --shadow-xs:                0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm:                0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-base:              0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-md:                0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg:                0 16px 40px rgba(0, 0, 0, 0.40);
    --shadow-xl:                0 24px 64px rgba(0, 0, 0, 0.50);
    --shadow-accent:            0 4px 16px rgba(232, 172, 37, 0.45);
    --shadow-inner:             inset 0 2px 4px rgba(0, 0, 0, 0.25);


    /* ============================================================
     *  SECTION 7: NAVIGATION
     * ============================================================ */

    --nav-height:               68px;
    --nav-height-mobile:        56px;
    --nav-bg:                   #0a1c2b;
    --nav-text:                 var(--color-text-on-primary);
    --nav-link-hover-bg:        rgba(255,255,255,0.12);
    --nav-border-bottom:        rgba(255,255,255,0.10);
    --nav-logo-height:          42px;
    --nav-z-index:              1000;


    /* ============================================================
     *  SECTION 8: BUTTONS
     * ============================================================ */

    --btn-padding-sm:           var(--space-2) var(--space-4);
    --btn-padding-base:         var(--space-3) var(--space-6);
    --btn-padding-lg:           var(--space-4) var(--space-8);
    --btn-font-size-sm:         var(--font-size-sm);
    --btn-font-size-base:       var(--font-size-base);
    --btn-font-size-lg:         var(--font-size-md);
    --btn-font-weight:          var(--font-weight-bold);
    --btn-border-radius:        var(--radius-base);
    --btn-transition:           all 0.2s ease;

    --btn-primary-bg:           var(--color-accent);
    --btn-primary-text:         var(--color-text-on-accent);
    --btn-primary-border:       transparent;
    --btn-primary-hover-bg:     var(--color-accent-dark);
    --btn-primary-shadow:       var(--shadow-accent);

    --btn-secondary-bg:         var(--color-primary);
    --btn-secondary-text:       var(--color-text-on-primary);
    --btn-secondary-border:     transparent;
    --btn-secondary-hover-bg:   var(--color-primary-dark);

    --btn-outline-bg:           transparent;
    --btn-outline-text:         #FFFFFF;
    --btn-outline-border:       rgba(255, 255, 255, 0.3);
    --btn-outline-hover-bg:     rgba(255, 255, 255, 0.08);

    --btn-ghost-bg:             transparent;
    --btn-ghost-text:           #FFFFFF;
    --btn-ghost-hover-bg:       rgba(255, 255, 255, 0.08);

    --btn-danger-bg:            var(--color-red);
    --btn-danger-text:          #FFFFFF;
    --btn-danger-border:        transparent;
    --btn-danger-hover-bg:      var(--color-red-dark);


    /* ============================================================
     *  SECTION 9: FORMS & INPUTS
     * ============================================================ */

    --input-height:             44px;
    --input-padding:            var(--space-3) var(--space-4);
    --input-bg:                 rgba(255, 255, 255, 0.07);
    --input-border:             rgba(255, 255, 255, 0.15);
    --input-border-radius:      var(--radius-base);
    --input-font-size:          var(--font-size-base);
    --input-text:               #FFFFFF;
    --input-placeholder:        rgba(255, 255, 255, 0.3);
    --input-focus-border:       #E8AC25;
    --input-focus-shadow:       0 0 0 3px rgba(232, 172, 37, 0.2);
    --input-error-border:       var(--color-red);
    --input-error-bg:           var(--color-red-light);
    --input-disabled-bg:        rgba(255, 255, 255, 0.04);
    --input-disabled-text:      rgba(255, 255, 255, 0.4);
    --label-font-size:          var(--font-size-sm);
    --label-font-weight:        var(--font-weight-semibold);
    --label-color:              rgba(255, 255, 255, 0.7);


    /* ============================================================
     *  SECTION 10: CARDS
     * ============================================================ */

    --card-bg:                  var(--color-surface);
    --card-border:              var(--color-border);
    --card-border-radius:       var(--radius-md);
    --card-padding:             var(--space-6);
    --card-shadow:              var(--shadow-sm);
    --card-hover-shadow:        var(--shadow-base);
    --card-hover-transform:     translateY(-2px);
    --card-transition:          all 0.2s ease;


    /* ============================================================
     *  SECTION 11: FOOTER
     * ============================================================ */

    --footer-bg:                #0a1c2b;
    --footer-text:              rgba(255, 255, 255, 0.80);
    --footer-heading:           #FFFFFF;
    --footer-link:              rgba(255, 255, 255, 0.70);
    --footer-link-hover:        var(--color-accent);
    --footer-border-top:        rgba(255, 255, 255, 0.12);
    --footer-padding:           var(--space-12) 0 var(--space-8);


    /* ============================================================
     *  SECTION 12: ALERTS & NOTIFICATIONS
     * ============================================================ */

    --alert-success-bg:         rgba(67, 142, 37, 0.15);
    --alert-success-border:     var(--color-green);
    --alert-success-text:       #6abf4a;
    --alert-error-bg:           rgba(217, 37, 22, 0.15);
    --alert-error-border:       var(--color-red);
    --alert-error-text:         #ff9a91;
    --alert-warning-bg:         rgba(232, 172, 37, 0.15);
    --alert-warning-border:     var(--color-accent);
    --alert-warning-text:       #E8AC25;
    --alert-info-bg:            rgba(26, 82, 112, 0.15);
    --alert-info-border:        var(--color-primary);
    --alert-info-text:          #7ec8e3;
    --alert-padding:            var(--space-4) var(--space-5);
    --alert-border-radius:      var(--radius-base);
    --alert-border-width:       4px;


    /* ============================================================
     *  SECTION 13: BADGES & TAGS
     * ============================================================ */

    --badge-font-size:          var(--font-size-xs);
    --badge-font-weight:        var(--font-weight-bold);
    --badge-padding:            var(--space-1) var(--space-3);
    --badge-border-radius:      var(--radius-pill);
    --badge-letter-spacing:     var(--letter-spacing-wider);

    --badge-free-bg:            rgba(255, 255, 255, 0.10);
    --badge-free-text:          rgba(255, 255, 255, 0.6);
    --badge-basecamp-bg:        rgba(67, 142, 37, 0.15);
    --badge-basecamp-text:      #6abf4a;
    --badge-fullhookup-bg:      rgba(232, 172, 37, 0.15);
    --badge-fullhookup-text:    #E8AC25;
    --badge-trial-bg:           rgba(23, 162, 184, 0.15);
    --badge-trial-text:         #17a2b8;
    --badge-admin-bg:           var(--color-primary);
    --badge-admin-text:         #FFFFFF;


    /* ============================================================
     *  SECTION 14: LAYOUT & CONTAINERS
     * ============================================================ */

    --container-sm:             640px;
    --container-md:             768px;
    --container-lg:             1024px;
    --container-xl:             1280px;
    --container-2xl:            1440px;
    --container-padding:        var(--space-4);
    --container-padding-lg:     var(--space-8);
    --sidebar-width:            260px;
    --sidebar-collapsed-width:  68px;


    /* ============================================================
     *  SECTION 15: BREAKPOINTS (Reference)
     *  Mobile:    < 640px
     *  Tablet:    640px - 1023px
     *  Desktop:   1024px - 1279px
     *  Wide:      1280px+
     * ============================================================ */


    /* ============================================================
     *  SECTION 16: TRANSITIONS & ANIMATION
     * ============================================================ */

    --transition-fast:          0.15s ease;
    --transition-base:          0.2s ease;
    --transition-slow:          0.35s ease;
    --transition-bounce:        0.3s cubic-bezier(0.34, 1.56, 0.64, 1);


    /* ============================================================
     *  SECTION 17: Z-INDEX SCALE
     * ============================================================ */

    --z-below:                  -1;
    --z-base:                    0;
    --z-raised:                  10;
    --z-dropdown:                100;
    --z-sticky:                  200;
    --z-nav:                     1000;
    --z-overlay:                 2000;
    --z-modal:                   3000;
    --z-toast:                   4000;
    --z-tooltip:                 5000;


    /* ============================================================
     *  SECTION 18: MAP MODULE (Leaflet.js)
     * ============================================================ */

    --map-height-desktop:       600px;
    --map-height-mobile:        400px;
    --map-border-radius:        var(--radius-lg);
    --map-popup-bg:             var(--color-surface-raised);
    --map-popup-border:         var(--color-border);
    --map-popup-shadow:         var(--shadow-md);
    --map-marker-color:         var(--color-primary);
    --map-marker-accent:        var(--color-accent);


    /* ============================================================
     *  SECTION 19: FORUM (SMF Integration)
     * ============================================================ */

    --forum-wrapper-bg:         var(--color-bg);
    --forum-wrapper-padding:    var(--space-4);


    /* ============================================================
     *  SECTION 20: JOB BOARD
     * ============================================================ */

    --job-card-bg:              var(--color-surface);
    --job-card-border:          var(--color-border);
    --job-card-hover-border:    var(--color-accent);
    --job-tag-bg:               var(--color-primary-light);
    --job-tag-text:             #7ec8e3;
    --job-featured-border:      var(--color-accent);
    --job-featured-bg:          var(--color-accent-light);

}


/* ============================================================
 *  BASE RESET & GLOBAL DEFAULTS
 * ============================================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:    var(--font-family-base);
    font-size:      var(--font-size-base);
    font-weight:    var(--font-weight-normal);
    line-height:    var(--line-height-normal);
    color:          var(--color-text);
    background:     var(--color-bg);
    min-height:     100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-family-heading);
    font-weight:    var(--font-weight-bold);
    line-height:    var(--line-height-tight);
    color:          #FFFFFF;
    letter-spacing: var(--letter-spacing-tight);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl);  }
h4 { font-size: var(--font-size-lg);  }
h5 { font-size: var(--font-size-md);  }
h6 { font-size: var(--font-size-base);}

a,
a:visited {
    color:              rgba(255, 255, 255, 0.85);
    text-decoration:    none;
    transition:         color var(--transition-fast);
}
a:hover {
    color:              #FFFFFF;
    text-decoration:    underline;
}

/* Content links — green + underlined so they're visible without hover.
   Covers all body text contexts: paragraphs, list items, table cells,
   definition lists, help articles, ticket messages, job descriptions,
   alerts, notices, and form help text. Does NOT affect nav links,
   buttons, cards, or other UI elements.
   Override with a more specific selector if a context needs different
   link styling (e.g. nav links, sidebar links, card labels). */
p a,
p a:visited,
dd a,
dd a:visited,
td a,
td a:visited,
blockquote a,
blockquote a:visited,
.help-article__body a,
.help-article__body a:visited,
.tkt-msg__body a,
.tkt-msg__body a:visited,
.ticket-message__body a,
.ticket-message__body a:visited,
.tkt-closed-notice a,
.tkt-closed-notice a:visited,
.tkt-resolved-notice a,
.tkt-resolved-notice a:visited,
.portal-detail__body a,
.portal-detail__body a:visited,
.portal-detail__instructions a,
.portal-detail__instructions a:visited,
.job-detail__body a,
.job-detail__body a:visited,
.alert a,
.alert a:visited,
.dash-field-note a,
.dash-field-note a:visited,
.dash-muted-sm a,
.dash-muted-sm a:visited,
.checkout-legal a,
.checkout-legal a:visited {
    color:              var(--color-link);
    text-decoration:    underline;
}

p a:hover,
p a:visited:hover,
dd a:hover,
dd a:visited:hover,
td a:hover,
td a:visited:hover,
blockquote a:hover,
blockquote a:visited:hover,
.help-article__body a:hover,
.help-article__body a:visited:hover,
.tkt-msg__body a:hover,
.tkt-msg__body a:visited:hover,
.ticket-message__body a:hover,
.ticket-message__body a:visited:hover,
.tkt-closed-notice a:hover,
.tkt-closed-notice a:visited:hover,
.tkt-resolved-notice a:hover,
.tkt-resolved-notice a:visited:hover,
.portal-detail__body a:hover,
.portal-detail__body a:visited:hover,
.portal-detail__instructions a:hover,
.portal-detail__instructions a:visited:hover,
.job-detail__body a:hover,
.job-detail__body a:visited:hover,
.alert a:hover,
.alert a:visited:hover,
.dash-field-note a:hover,
.dash-field-note a:visited:hover,
.dash-muted-sm a:hover,
.dash-muted-sm a:visited:hover,
.checkout-legal a:hover,
.checkout-legal a:visited:hover {
    color:              var(--color-link-hover);
}

img {
    max-width:  100%;
    height:     auto;
    display:    block;
}

/* ============================================================
 *  LAYOUT UTILITIES
 * ============================================================ */

.wcc-container {
    width:          100%;
    max-width:      var(--container-xl);
    margin:         0 auto;
    padding-left:   var(--container-padding);
    padding-right:  var(--container-padding);
}

@media (min-width: 1024px) {
    .wcc-container {
        padding-left:   var(--container-padding-lg);
        padding-right:  var(--container-padding-lg);
    }
}

/* ============================================================
 *  BUTTON STYLES
 * ============================================================ */

.btn {
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    gap:                var(--space-2);
    padding:            var(--btn-padding-base);
    font-family:        var(--font-family-base);
    font-size:          var(--btn-font-size-base);
    font-weight:        var(--btn-font-weight);
    border-radius:      var(--btn-border-radius);
    border:             2px solid transparent;
    cursor:             pointer;
    text-decoration:    none;
    transition:         var(--btn-transition);
    white-space:        nowrap;
    line-height:        1;
}

.btn:hover { text-decoration: none; }
.btn-sm  { padding: var(--btn-padding-sm);  font-size: var(--btn-font-size-sm);  }
.btn-lg  { padding: var(--btn-padding-lg);  font-size: var(--btn-font-size-lg);  }

.btn-primary {
    background:     var(--btn-primary-bg);
    color:          var(--btn-primary-text);
    border-color:   var(--btn-primary-border);
    box-shadow:     var(--btn-primary-shadow);
}
.btn-primary:hover {
    background:     var(--btn-primary-hover-bg);
    color:          var(--btn-primary-text);
    transform:      translateY(-1px);
}

.btn-secondary {
    background:     var(--btn-secondary-bg);
    color:          var(--btn-secondary-text);
}
.btn-secondary:hover {
    background:     var(--btn-secondary-hover-bg);
    color:          var(--btn-secondary-text);
    transform:      translateY(-1px);
}

.btn-outline {
    background:     var(--btn-outline-bg);
    color:          var(--btn-outline-text);
    border-color:   var(--btn-outline-border);
}
.btn-outline:hover {
    background:     var(--btn-outline-hover-bg);
    color:          var(--btn-outline-text);
}

.btn-ghost {
    background:     var(--btn-ghost-bg);
    color:          var(--btn-ghost-text);
    border-color:   transparent;
}
.btn-ghost:hover { background: var(--btn-ghost-hover-bg); }

.btn-danger {
    background:     var(--btn-danger-bg);
    color:          var(--btn-danger-text);
}
.btn-danger:hover {
    background:     var(--btn-danger-hover-bg);
    color:          var(--btn-danger-text);
    transform:      translateY(-1px);
}

.btn:disabled, .btn[disabled] {
    opacity:        0.5;
    cursor:         not-allowed;
    transform:      none;
    box-shadow:     none;
}

/* Prevent global a:visited from overriding button colors */
.btn-primary:visited  { color: var(--btn-primary-text); }
.btn-secondary:visited { color: var(--btn-secondary-text); }
.btn-outline:visited  { color: var(--btn-outline-text); }
.btn-ghost:visited    { color: var(--btn-ghost-text); }
.btn-danger:visited   { color: var(--btn-danger-text); }

/* ============================================================
 *  CARD STYLES
 * ============================================================ */

.card {
    background:     var(--card-bg);
    border:         1px solid var(--card-border);
    border-radius:  var(--card-border-radius);
    padding:        var(--card-padding);
    box-shadow:     var(--card-shadow);
    transition:     var(--card-transition);
}

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

/* ============================================================
 *  FORM STYLES
 * ============================================================ */

/* Global baseline — ensures ALL form elements on the platform
   have readable white text on the dark navy background, even if
   a page uses custom class names instead of .form-input/.form-select.
   Class-based rules below have higher specificity and still apply. */
input,
select,
textarea {
    color:          var(--input-text);
    background:     var(--input-bg);
    border:         1px solid var(--input-border);
    border-radius:  var(--input-border-radius);
    font-family:    var(--font-family-base);
    font-size:      var(--input-font-size);
    outline:        none;
}
input::placeholder,
textarea::placeholder {
    color:          var(--input-placeholder);
}
input:focus,
select:focus,
textarea:focus {
    border-color:   var(--input-focus-border);
    box-shadow:     var(--input-focus-shadow);
}

/* Exclude special input types from text-input styling */
input[type="checkbox"],
input[type="radio"] {
    background:     transparent;
    border:         revert;
    border-radius:  revert;
}
input[type="color"] {
    background:     revert;
    border:         revert;
    border-radius:  revert;
    padding:        0;
}

.form-label {
    display:        block;
    font-size:      var(--label-font-size);
    font-weight:    var(--label-font-weight);
    color:          var(--label-color);
    margin-bottom:  var(--space-2);
}

.form-input, .form-select, .form-textarea {
    display:        block;
    width:          100%;
    padding:        var(--input-padding);
    font-family:    var(--font-family-base);
    font-size:      var(--input-font-size);
    color:          var(--input-text);
    background:     var(--input-bg);
    border:         1px solid var(--input-border);
    border-radius:  var(--input-border-radius);
    transition:     border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline:        none;
    appearance:     none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color:   var(--input-focus-border);
    box-shadow:     var(--input-focus-shadow);
}

.form-input::placeholder, .form-textarea::placeholder {
    color:          var(--input-placeholder);
}

.form-input.is-error {
    border-color:   var(--input-error-border);
    background:     var(--input-error-bg);
}

.form-input:disabled {
    background:     var(--input-disabled-bg);
    color:          var(--input-disabled-text);
    cursor:         not-allowed;
}

.form-textarea {
    min-height:     120px;
    resize:         vertical;
}

.form-group    { margin-bottom: var(--space-5); }
.form-error    { display: block; margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-red); }
.form-hint     { display: block; margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ============================================================
 *  ALERT STYLES
 * ============================================================ */

.alert {
    padding:        var(--alert-padding);
    border-radius:  var(--alert-border-radius);
    border-left:    var(--alert-border-width) solid transparent;
    font-size:      var(--font-size-sm);
    margin-bottom:  var(--space-4);
}

.alert-success  { background: var(--alert-success-bg);  border-color: var(--alert-success-border);  color: var(--alert-success-text);  }
.alert-error    { background: var(--alert-error-bg);    border-color: var(--alert-error-border);    color: var(--alert-error-text);    }
.alert-warning  { background: var(--alert-warning-bg);  border-color: var(--alert-warning-border);  color: var(--alert-warning-text);  }
.alert-info     { background: var(--alert-info-bg);     border-color: var(--alert-info-border);     color: var(--alert-info-text);     }

/* ============================================================
 *  BADGE STYLES
 * ============================================================ */

.badge {
    display:            inline-flex;
    align-items:        center;
    font-size:          var(--badge-font-size);
    font-weight:        var(--badge-font-weight);
    padding:            var(--badge-padding);
    border-radius:      var(--badge-border-radius);
    letter-spacing:     var(--badge-letter-spacing);
    text-transform:     uppercase;
    white-space:        nowrap;
}

.badge-free        { background: var(--badge-free-bg);       color: var(--badge-free-text);       }
.badge-basecamp    { background: var(--badge-basecamp-bg);   color: var(--badge-basecamp-text);   }
.badge-fullhookup  { background: var(--badge-fullhookup-bg); color: var(--badge-fullhookup-text); }
.badge-trial       { background: var(--badge-trial-bg);      color: var(--badge-trial-text);      }
.badge-admin       { background: var(--badge-admin-bg);      color: var(--badge-admin-text);      }

/* ============================================================
 *  UTILITY CLASSES
 * ============================================================ */

.text-primary   { color: #7ec8e3;                  }
.text-accent    { color: var(--color-accent);     }
.text-green     { color: var(--color-green);      }
.text-red       { color: var(--color-red);        }
.text-muted     { color: var(--color-text-muted); }

.bg-primary     { background: var(--color-primary);  color: var(--color-text-on-primary); }
.bg-accent      { background: var(--color-accent);   color: var(--color-text-on-accent);  }
.bg-surface     { background: var(--color-surface);  }
.bg-white       { background: rgba(255, 255, 255, 0.06); }

.mt-auto        { margin-top: auto;         }
.text-center    { text-align: center;       }
.text-right     { text-align: right;        }
.font-bold      { font-weight: var(--font-weight-bold);     }
.font-semibold  { font-weight: var(--font-weight-semibold); }
.text-sm        { font-size: var(--font-size-sm);   }
.text-xs        { font-size: var(--font-size-xs);   }
.text-lg        { font-size: var(--font-size-lg);   }

.d-flex         { display: flex;            }
.align-center   { align-items: center;      }
.justify-between{ justify-content: space-between; }
.gap-2          { gap: var(--space-2);      }
.gap-4          { gap: var(--space-4);      }
.gap-6          { gap: var(--space-6);      }

.w-full         { width: 100%;              }
.rounded        { border-radius: var(--radius-base); }
.rounded-pill   { border-radius: var(--radius-pill); }
.shadow-sm      { box-shadow: var(--shadow-sm);   }
.shadow         { box-shadow: var(--shadow-base); }

/* ============================================================
 *  RESPONSIVE HELPERS
 * ============================================================ */

@media (max-width: 639px) {
    .hide-mobile    { display: none !important; }
    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl);  }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .hide-tablet    { display: none !important; }
}

@media (min-width: 1024px) {
    .hide-desktop   { display: none !important; }
}

/* ============================================================
 *  FOUNDING MEMBER BADGE (Global)
 *  Gold gradient pill badge with star icon.
 *  Sizes: default (sm), --xs (forum/map), --lg (dashboard)
 * ============================================================ */

.founding-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    background: linear-gradient(135deg, #E8AC25 0%, #D4972A 100%);
    color: #0b1e2d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    line-height: 1.4;
}

.founding-badge--xs {
    font-size: 9px;
    padding: 2px 7px;
}

.founding-badge--lg {
    font-size: 12px;
    padding: 5px 14px;
}