/* ═══════════════════════════════════════════════════════════════
   Tripperist Design Tokens — Cloud Nine palette
   Light mode (default) → Dark/Neon mode (.dark on body)
   See docs/design-system.md for full token reference.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Page background ── */
    --page-bg:        #F5F4FC;  /* Pale lavender */
    --page-bg-deep:   #ECEAFE;
    --page-bg-soft:   #EDEAF8;  /* Warm lavender alt sections — matches mockup */
    --page-bg-pale:   #F8F7FE;

    /* ── Nav ── */
    --nav-bg:             rgba(255,255,255,.94);  /* Light glass */
    --nav-bg-dark:        #ECEAFE;
    --nav-border-color:   rgba(160,148,210,.22);
    --nav-text:           rgba(80,70,128,.62);
    --nav-text-hover-c:   #16122E;
    --user-chip-bd:       rgba(160,148,210,.28);
    --user-chip-hover-bg: rgba(123,92,240,.05);
    --user-chip-open-bg:  rgba(123,92,240,.08);
    --user-chip-open-bd:  rgba(123,92,240,.28);
    --user-avatar-bd:     rgba(160,148,210,.4);
    --user-name-c:        #5A5280;
    --user-caret-c:       #A098C0;
    --dropdown-bg:        #FFFFFF;
    --dropdown-bd:        rgba(160,148,210,.22);
    --dropdown-item-c:    #5A5280;
    --dropdown-item-hover-bg: rgba(123,92,240,.06);
    --dropdown-item-hover-c:  #16122E;
    --hamburger-c:        rgba(90,80,140,.65);
    --mobile-menu-bg:     rgba(255,255,255,.98);
    --mobile-menu-bd:     rgba(160,148,210,.2);
    --mobile-link-c:      #5A5280;
    --mobile-link-hover-bg: rgba(123,92,240,.05);
    --hero-bg:            linear-gradient(150deg, #ECEAFE 0%, #F5F4FC 55%, #EBF0FF 100%);

    /* ── Accent colors ── */
    --accent:         #335AFF;  /* Electric blue — CTAs, pins */
    --accent-dim:     rgba(51,90,255,.08);
    --tertiary:       #7B5CF0;  /* Violet — chips, labels */
    --tertiary-dim:   rgba(123,92,240,.10);
    --tertiary-dark:  #6640E0;

    /* ── Surfaces ── */
    --card-bg:        #FFFFFF;
    --card-border:    rgba(160,148,210,.22);
    --card-shadow:    0 1px 4px rgba(80,60,160,.06), 0 6px 24px rgba(60,40,120,.06);
    --card-hover-shadow: 0 2px 8px rgba(60,40,120,.09), 0 16px 40px rgba(60,40,120,.12);

    /* ── Text ── */
    --text:           #16122E;
    --text-2:         #5A5280;
    --text-3:         #A098C0;
    --on-nav:         #16122E;

    /* ── Component tokens ── */
    --eyebrow-color:  #7B5CF0;
    --eyebrow-shadow: none;
    --chip-bg:        rgba(123,92,240,.10);
    --chip-color:     #6640E0;
    --chip-border:    transparent;
    --chip-shadow:    none;

    --nav-link-hover:        rgba(255,255,255,.9);
    --nav-link-hover-shadow: none;

    --toggle-color:        rgba(80,70,128,.6);
    --toggle-border:       rgba(160,148,210,.35);
    --toggle-shadow:       none;
    --toggle-hover-color:  #16122E;

    --dark-section-bg: #16122E;
    --footer-bg:       #0D0A1E;

    --logo-mark-bg:     #335AFF;
    --logo-mark-color:  #FFFFFF;
    --logo-mark-border: transparent;
    --logo-mark-shadow: 0 2px 12px rgba(51,90,255,.4);
    --logo-pulse:       none;

    /* ── Buttons ── */
    --btn-primary-bg:     #335AFF;
    --btn-primary-color:  #FFFFFF;
    --btn-primary-border: transparent;
    --btn-primary-shadow: 0 4px 16px rgba(51,90,255,.28);

    /* ── Semantic status (locked across themes) ── */
    --status-approved: #43A047;
    --status-pending:  #FF9800;
    --status-rejected: #E53935;
    --status-draft:    #9E9E9E;

    --scanlines: none;
}

/* ═══════════════════════════════════════════════════════════════
   Dark / Neon overrides (Route 66 mode)
   ═══════════════════════════════════════════════════════════════ */

body.dark {
    --page-bg:        #080C18;
    --page-bg-deep:   #060810;
    --page-bg-soft:   #0F1525;
    --page-bg-pale:   #162038;

    --nav-bg:             rgba(8,12,24,.96);
    --nav-bg-dark:        #030508;
    --nav-border-color:   rgba(192,192,236,.07);
    --nav-text:           rgba(255,255,255,.62);
    --nav-text-hover-c:   rgba(255,255,255,.9);
    --user-chip-bd:       rgba(255,255,255,.12);
    --user-chip-hover-bg: rgba(255,255,255,.07);
    --user-chip-open-bg:  rgba(255,255,255,.1);
    --user-chip-open-bd:  rgba(255,255,255,.25);
    --user-avatar-bd:     rgba(255,255,255,.2);
    --user-name-c:        rgba(255,255,255,.8);
    --user-caret-c:       rgba(255,255,255,.45);
    --dropdown-bg:        rgba(8,12,24,.98);
    --dropdown-bd:        rgba(192,192,236,.15);
    --dropdown-item-c:    rgba(255,255,255,.75);
    --dropdown-item-hover-bg: rgba(255,255,255,.08);
    --dropdown-item-hover-c:  #FFFFFF;
    --hamburger-c:        rgba(255,255,255,.7);
    --mobile-menu-bg:     rgba(8,12,24,.98);
    --mobile-menu-bd:     rgba(192,192,236,.12);
    --mobile-link-c:      rgba(255,255,255,.75);
    --mobile-link-hover-bg: rgba(255,255,255,.06);
    --hero-bg:            linear-gradient(150deg, var(--nav-bg-dark) 0%, var(--nav-bg) 100%);

    --accent:         #FF9A50;
    --accent-dim:     rgba(255,154,80,.12);
    --tertiary:       #E8C040;
    --tertiary-dim:   rgba(232,192,64,.12);
    --tertiary-dark:  #E8C040;

    --card-bg:        #0F1525;
    --card-border:    rgba(192,192,236,.16);
    --card-shadow:    0 0 16px rgba(192,192,236,.05);
    --card-hover-shadow: 0 0 24px rgba(192,192,236,.14), 0 0 60px rgba(192,192,236,.04);

    --text:    #D8D8F0;
    --text-2:  #8A8AAC;
    --text-3:  #454568;
    --on-nav:  #D8D8F0;

    --eyebrow-color:  #E8C040;
    --eyebrow-shadow: 0 0 10px rgba(232,192,64,.6), 0 0 24px rgba(232,192,64,.25);
    --chip-bg:        transparent;
    --chip-color:     #E8C040;
    --chip-border:    rgba(232,192,64,.32);
    --chip-shadow:    0 0 8px rgba(232,192,64,.15);

    --nav-link-hover:        #C0C0EC;
    --nav-link-hover-shadow: 0 0 12px rgba(192,192,236,.5);

    --toggle-color:       #FF9A50;
    --toggle-border:      #FF9A50;
    --toggle-shadow:      0 0 10px rgba(255,154,80,.35), inset 0 0 6px rgba(255,154,80,.07);
    --toggle-hover-color: #FFBB78;

    --dark-section-bg: #080C18;
    --footer-bg:       #030508;

    --logo-mark-bg:     transparent;
    --logo-mark-color:  #FF9A50;
    --logo-mark-border: #FF9A50;
    --logo-mark-shadow: 0 0 8px rgba(255,154,80,.65), 0 0 20px rgba(255,130,56,.3), inset 0 0 8px rgba(255,154,80,.12);
    --logo-pulse:       pulse-logo 4s ease-in-out infinite;

    --btn-primary-bg:     transparent;
    --btn-primary-color:  #FF9A50;
    --btn-primary-border: #FF9A50;
    --btn-primary-shadow: 0 0 12px rgba(255,154,80,.4), 0 0 30px rgba(255,130,56,.18),
                          inset 0 0 10px rgba(255,154,80,.08);

    --scanlines: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px
    );
}

/* ═══════════════════════════════════════════════════════════════
   Keyframes
   ═══════════════════════════════════════════════════════════════ */

@keyframes neon-flicker {
    0%   { opacity:0; }
    14%  { opacity:1; }
    17%  { opacity:.55; }
    19%  { opacity:1; }
    21%  { opacity:.7; }
    24%  { opacity:1; }
    100% { opacity:1; }
}

@keyframes pulse-logo {
    0%,100% { opacity:1; }
    50%      { opacity:.82; }
}

/* ═══════════════════════════════════════════════════════════════
   Reset + Base
   ═══════════════════════════════════════════════════════════════ */

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

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--page-bg);
    background-image: var(--scanlines);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    transition: background .35s ease, color .3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Layout helpers
   ═══════════════════════════════════════════════════════════════ */

.content {
    padding: 38px 28px 56px;
    max-width: 1080px;
    margin: 0 auto;
}

.section-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ═══════════════════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════════════════ */

.eyebrow {
    font-family: 'SF Mono','Courier New',monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    text-shadow: var(--eyebrow-shadow);
    margin-bottom: 10px;
    transition: color .3s, text-shadow .3s;
}

.page-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 16px;
    outline: none;
    transition: color .3s;
}

body.dark .page-title {
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════ */

.hero {
    background: var(--hero-bg);
    padding: 52px 0 64px;
    position: relative;
    overflow: hidden;
    transition: background .35s;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--page-bg));
    pointer-events: none;
    transition: background .35s;
}

.hero-eyebrow {
    font-family: 'SF Mono','Courier New',monospace;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    margin-bottom: 10px;
    transition: color .3s, text-shadow .3s;
}

body.dark .hero-eyebrow {
    color: var(--tertiary);
    text-shadow: var(--eyebrow-shadow);
}

.hero-hed {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--text);
    text-wrap: balance;
    margin-bottom: 18px;
    letter-spacing: -.025em;
    transition: color .3s, text-shadow .3s;
    outline: none;
}

body.dark .hero-hed {
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #C0C0EC;
    text-shadow: 0 0 4px rgba(192,192,236,.98), 0 0 12px rgba(168,168,214,.85),
                 0 0 30px rgba(140,140,200,.55), 0 0 70px rgba(110,110,185,.22);
    animation: neon-flicker 1.6s ease-out both;
}

.hero-sub {
    font-size: 15px;
    color: var(--text-2);
    max-width: 52ch;
    line-height: 1.7;
    margin-bottom: 30px;
}

.hero-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════ */

.btn-primary {
    display: inline-flex;
    align-items: center;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    border: 1.5px solid var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow);
    padding: 11px 26px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .2s, background .35s, color .3s, border-color .35s, opacity .15s;
}

.btn-primary:hover { opacity: .88; }

body.dark .btn-primary {
    text-transform: uppercase;
    letter-spacing: .05em;
}

body.dark .btn-primary:hover {
    opacity: 1;
    box-shadow: 0 0 22px rgba(255,154,80,.6), 0 0 50px rgba(255,130,56,.28),
                inset 0 0 14px rgba(255,154,80,.12);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--text-2);
    border: 1px solid rgba(90,82,128,.28);
    padding: 11px 26px;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, border-color .3s, color .3s;
}

.btn-outline:hover {
    background: var(--accent-dim);
    border-color: rgba(51,90,255,.3);
    color: var(--text);
}

body.dark .btn-outline {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.22);
}

body.dark .btn-outline:hover { background: rgba(255,255,255,.14); }

/* ═══════════════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════════════ */

.card {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, background .35s, border-color .35s;
}

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

/* ═══════════════════════════════════════════════════════════════
   Chips
   ═══════════════════════════════════════════════════════════════ */

.chip {
    display: inline-flex;
    align-items: center;
    background: var(--chip-bg);
    color: var(--chip-color);
    border: 1px solid var(--chip-border);
    box-shadow: var(--chip-shadow);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: 'SF Mono','Courier New',monospace;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .35s, color .3s, border-color .35s, box-shadow .35s;
}

/* ═══════════════════════════════════════════════════════════════
   Status badges (semantic — theme-independent)
   ═══════════════════════════════════════════════════════════════ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
}

.status-approved { background: #EBF7EC; color: #2E7D32; }
.status-pending  { background: #FFF3E0; color: #E65100; }
.status-rejected { background: #FEECEC; color: #C62828; }
.status-draft    { background: #F0F0F8; color: #555555; }

body.dark .status-approved { background: rgba(82,192,90,.1);   color: #52C05A; border: 1px solid rgba(82,192,90,.28); }
body.dark .status-pending  { background: rgba(255,170,64,.1);  color: #FFAA40; border: 1px solid rgba(255,170,64,.28); }
body.dark .status-rejected { background: rgba(240,80,80,.1);   color: #F05050; border: 1px solid rgba(240,80,80,.28); }
body.dark .status-draft    { background: rgba(100,100,120,.1); color: #667788; border: 1px solid rgba(100,100,120,.28); }

/* ═══════════════════════════════════════════════════════════════
   Dev placeholder
   ═══════════════════════════════════════════════════════════════ */

.placeholder-note {
    color: var(--text-3);
    font-style: italic;
    font-size: 13.5px;
    margin-top: 8px;
}