/* ============================================================
   MODE MARKETING — BASE CSS
   Canonical brand foundation for ALL Mode sub-projects.
   Source of truth: website-ai/assets/css/main.css

   Import this FIRST in any Mode project, then override as needed.
   ============================================================ */

/* ---- CSS Custom Properties --------------------------------- */
:root {
    /* Colour palette */
    --color-void:       #0A0A0A;   /* Primary background */
    --color-carbon:     #141414;   /* Card/section backgrounds */
    --color-gunmetal:   #1E1E1E;   /* Borders, dividers */
    --color-smoke:      #666666;   /* Secondary body text */
    --color-dark-grey:  #404041;   /* Brand dark grey */
    --color-light-grey: #6D6E70;   /* Brand light grey */
    --color-chalk:      #F0F0F0;   /* Primary body text */
    --color-white:      #FFFFFF;   /* Headlines, logo */
    --color-volt:       #C8FF00;   /* Accent (PRIMARY) */
    --color-volt-hover: #DFFF00;   /* Volt hover state */

    /* Typography */
    --font-primary: 'Exo', sans-serif;

    /* Transitions */
    --transition-fast: 200ms ease-out;

    /* Layout */
    --section-padding-top:    88px;
    --section-padding-bottom: 88px;
    --section-padding: var(--section-padding-top) 0 var(--section-padding-bottom);
    --max-width: 1280px;
    --container-padding: 0 40px;

    /* Borders */
    --border-hairline: 0.5px solid var(--color-gunmetal);
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-smoke);
    background-color: var(--color-void);
}

/* ---- Global animated background canvas -------------------- */
#mode-global-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.page-wrapper {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* ---- Typography -------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
}

h1 { font-size: 56px; letter-spacing: -0.01em; }
h2 { font-size: 40px; letter-spacing: -0.005em; }
h3 { font-size: 28px; }
h4 { font-size: 20px; }

/* ============================================================
   CANONICAL BRAND HEADER — every Mode admin/dashboard app uses this.
   Layout: Mode logo on top, app name underneath in smoke grey.
   Both left-aligned flush. Right side contains utility controls (user, sign out, etc.)
   Rules:
     - Logo height: 100px (canonical app-chrome size — do not deviate)
     - Logo PNG must be the cropped variant (no transparent padding)
     - App name: 13px, 500 weight, uppercase, 0.15em letter-spacing, smoke colour
     - Logo and app name share the same left edge — no padding/margin compensation
     - Sidebar-layout apps: --nav-h must be 160px
   ============================================================ */
.brand-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: var(--border-hairline);
    gap: 24px;
}
.brand-header__mark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-left: 0;
}
.brand-header__mark img {
    height: 100px;
    width: auto;
    display: block;
}
.brand-header__mark h1,
.brand-header__mark .brand-header__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-smoke);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    padding-left: 0;
}
.brand-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--color-smoke);
}
.brand-header__actions a {
    color: var(--color-smoke);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    transition: color var(--transition-fast);
}
.brand-header__actions a:hover { color: var(--color-volt); }
.brand-header__actions button {
    background: transparent;
    border: 0.5px solid var(--color-gunmetal);
    color: var(--color-smoke);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.brand-header__actions button:hover {
    border-color: var(--color-smoke);
    color: var(--color-chalk);
}

/* ---- Brand login (logo big, centred at top, name below) --- */
/* Use this pattern for every Mode login page. */
.brand-login {
    width: 100%;
    max-width: 380px;
    margin: 100px auto;
}
.brand-login__card {
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    border-radius: 2px;
    padding: 40px 32px;
}
.brand-login__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.brand-login__logo img {
    height: 88px;
    width: auto;
    display: block;
}
.brand-login__sub {
    font-size: 12px;
    color: var(--color-smoke);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 32px;
}

/* ---- Eyebrow / section labels ----------------------------- */
.eyebrow {
    display: block;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-volt);
    margin-bottom: 24px;
}

/* ---- Links ------------------------------------------------- */
a {
    color: var(--color-volt);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-volt-hover);
}

/* ---- Buttons ----------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 32px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary {
    background-color: var(--color-volt);
    color: var(--color-void);
}
.btn-primary:hover {
    background-color: var(--color-volt-hover);
    color: var(--color-void);
}

.btn-outline {
    background: transparent;
    color: var(--color-chalk);
    border: 1px solid var(--color-smoke);
}
.btn-outline:hover {
    color: var(--color-white);
    border-color: var(--color-chalk);
}

/* ---- Layout ------------------------------------------------ */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--container-padding);
}

.section {
    padding: var(--section-padding);
}

.section--void {
    background-color: var(--color-void);
}

.section--carbon {
    background-color: var(--color-carbon);
}

/* ---- Cards (dark UI pattern) ------------------------------- */
.card {
    background-color: var(--color-carbon);
    border: 1px solid var(--color-gunmetal);
    border-radius: 2px;
    padding: 32px;
}

/* ---- Chrome autofill override (dark inputs) --------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-chalk) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--color-carbon) inset !important;
    box-shadow: 0 0 0 1000px var(--color-carbon) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ---- Form inputs (dark theme) ----------------------------- */
input, textarea, select {
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--color-chalk);
    background-color: var(--color-carbon);
    border: 1px solid var(--color-gunmetal);
    border-radius: 2px;
    padding: 12px 16px;
    outline: none;
    transition: border-color var(--transition-fast);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--color-volt);
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --section-padding-top: 56px;
        --section-padding-bottom: 56px;
        --container-padding: 0 20px;
    }
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
}

@media (max-width: 480px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    body { font-size: 16px; }
}