/*
Theme Name: Element 6
Theme URI: https://e6works.com
Author: Eva Marie / Sonoma Sandalwood
Author URI: https://e6works.com
Description: Custom theme for Element 6 — interactive items for the virtual grid. Bots, readers, displays and roleplay fixtures. Make it Matter.
Version: 2.9.5
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary - All Rights Reserved
License URI: https://e6works.com
Text Domain: element6
Tags: dark, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Element 6 THEME — DESIGN SYSTEM
   Phase 1: Foundation, design tokens, minimal base styles
   ========================================================================== */

:root {
    /* ══════════════════════════════════════════════════════════════════
       Element 6 — values are authoritative in BRAND-E6/BRAND-REFERENCE.md.
       Change them there first, then here.
       ══════════════════════════════════════════════════════════════════ */

    /* Grounds ------------------------------------------------------- */
    --e6-charcoal:       #1E2022;   /* primary ground */
    --e6-charcoal-deep:  #1E2022;
    --e6-charcoal-alt:   #1e2024;   /* alternating section ground */
    --e6-charcoal-band:  #16171a;   /* gradient banding bottom stop */
    --e6-screen:         #0B0D0F;   /* screen face — inset panels */
    --e6-panel:          #222528;   /* raised card surface */

    /* Type ---------------------------------------------------------- */
    --e6-white:          #F4F4F6;   /* stark white — wordmark, headings */
    --e6-silver:         #A3AED0;   /* anodized silver — chrome, spec text */
    --e6-slate:          #8E95A5;   /* tagline, metadata */
    --e6-slate-deep:     #7a8090;
    --e6-bezel:          #6E7787;   /* borders, bezels */

    /* Signal — actions only. Never a border, never a background flourish. */
    --e6-signal:         #F26419;
    --e6-signal-deep:    #C2500F;
    --e6-signal-bright:  #FF8747;
    --e6-signal-soft:    #FFA36B;
    --e6-signal-glow:      rgba(242, 100, 25, 0.45);
    --e6-signal-glow-soft: rgba(242, 100, 25, 0.18);

    /* Text ---------------------------------------------------------- */
    --e6-text:       #F4F4F6;
    --e6-text-muted: #8E95A5;
    --e6-text-dim:   #6E7787;
    /* These two were referenced 47 times in the original theme and never
       declared, so every rule using them silently produced no colour.
       Values chosen to sit between --e6-text and --e6-text-muted. */
    --e6-text-soft:  #A3AED0;
    --e6-text-faded: #6E7787;

    /* Status. Online is signal orange, not green: "powered" is the brand's
       idea of alive, and the pill breathes on the packaging timer. Flip this
       one line to #4ade80 if convention should win. */
    --e6-online:       #F26419;
    --e6-online-glow:  rgba(242, 100, 25, 0.6);
    --e6-offline:      #6E7787;
    --e6-warning:      #fbbf24;
    --e6-danger:       #f87171;

    /* Surfaces ------------------------------------------------------ */
    --e6-surface:         rgba(34, 37, 40, 0.60);
    --e6-surface-raised:  rgba(34, 37, 40, 0.85);
    --e6-surface-overlay: rgba(30, 32, 34, 0.95);

    /* Borders ------------------------------------------------------- */
    --e6-border:        rgba(163, 174, 208, 0.14);
    --e6-border-hover:  rgba(242, 100, 25, 0.45);
    --e6-border-strong: rgba(163, 174, 208, 0.32);

    /* Typography — Inter only. Hierarchy comes from weight and tracking,
       not from a second face. Orbitron is gone: it read sci-fi, and Element 6
       is engineered. */
    --e6-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --e6-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --e6-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --e6-track-wordmark: 0.05em;   /* the number that matters most */
    --e6-track-label:    0.22em;

    /* Font sizes — fluid type scale */
    --e6-fs-xs: 0.75rem;
    --e6-fs-sm: 0.875rem;
    --e6-fs-base: 1rem;
    --e6-fs-lg: 1.125rem;
    --e6-fs-xl: 1.25rem;
    --e6-fs-2xl: 1.5rem;
    --e6-fs-3xl: 2rem;
    --e6-fs-4xl: 2.5rem;
    --e6-fs-5xl: 3.5rem;
    --e6-fs-hero: clamp(2.5rem, 6vw, 5rem);

    /* Spacing ------------------------------------------------------- */
    --e6-space-1: 0.25rem;
    --e6-space-2: 0.5rem;
    --e6-space-3: 0.75rem;
    --e6-space-4: 1rem;
    --e6-space-5: 1.25rem;   /* undeclared in the original theme — 35 uses */
    --e6-space-6: 1.5rem;
    --e6-space-7: 1.75rem;   /* undeclared in the original theme — 3 uses  */
    --e6-space-8: 2rem;
    --e6-space-10: 2.5rem;   /* undeclared in the original theme — 20 uses */
    --e6-space-12: 3rem;
    --e6-space-16: 4rem;
    --e6-space-24: 6rem;

    /* Layout -------------------------------------------------------- */
    --e6-max-width: 1200px;
    --e6-max-width-narrow: 900px;
    --e6-max-width-wide: 1400px;
    --e6-nav-height: 80px;

    /* Effects ------------------------------------------------------- */
    --e6-radius-sm: 4px;
    --e6-radius-md: 8px;
    --e6-radius-lg: 12px;
    --e6-radius-xl: 16px;
    --e6-radius-pill: 100px;
    --e6-radius-tile: 13.5%;        /* the logo tile, per the brand spec */

    --e6-shadow-glow: 0 0 20px var(--e6-signal-glow-soft);
    --e6-shadow-glow-strong: 0 0 40px var(--e6-signal-glow);
    --e6-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);

    /* Motion — the breath, from [E6] Package.lsl. One clock for the whole
       brand: the package lid, the tile, the cell, the status pill. */
    --e6-breath-period: 4s;
    --e6-glow-min: 0.20;
    --e6-glow-max: 0.75;

    /* Transitions --------------------------------------------------- */
    --e6-ease: cubic-bezier(0.2, 0.8, 0.3, 1);
    --e6-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --e6-transition: 0.3s var(--e6-ease);
    --e6-transition-fast: 0.15s var(--e6-ease);
    --e6-transition-slow: 0.6s var(--e6-ease);

    /* Z-index layers ------------------------------------------------ */
    --e6-z-lattice: 0;
    --e6-z-nav: 100;
    --e6-z-dropdown: 110;
    --e6-z-modal: 200;
    --e6-z-tooltip: 300;
}

/* ==========================================================================
   PHASE 1+ BASE STYLES — Foundation in style.css
   Component styles live in assets/css/main.css
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--e6-charcoal);
    color: var(--e6-text);
    font-family: var(--e6-font-body);
    font-size: var(--e6-fs-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Construction notice for Phase 1 only — removed in Phase 2 */
.e6-phase1-notice {
    background: linear-gradient(90deg, var(--e6-signal-deep), var(--e6-signal));
    color: var(--e6-charcoal);
    padding: 12px 24px;
    text-align: center;
    font-family: var(--e6-font-mono);
    font-size: var(--e6-fs-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--e6-signal-bright);
}

/* Basic typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--e6-font-display);
    font-weight: 600;
    color: var(--e6-white);
    margin-top: 0;
    line-height: 1.2;
}

h1 { font-size: var(--e6-fs-4xl); }
h2 { font-size: var(--e6-fs-3xl); }
h3 { font-size: var(--e6-fs-2xl); }
h4 { font-size: var(--e6-fs-xl); }

p {
    margin-top: 0;
    margin-bottom: var(--e6-space-4);
}

a {
    color: var(--e6-signal);
    text-decoration: none;
    transition: color var(--e6-transition-fast);
}

a:hover {
    color: var(--e6-signal-bright);
}

/* Phase 1 simple wrap container */
.e6-container {
    max-width: var(--e6-max-width);
    margin: 0 auto;
    padding: 0 var(--e6-space-6);
}

/* Phase 1 minimal header — replaced in Phase 2 */
.e6-phase1-header {
    padding: var(--e6-space-6) 0;
    border-bottom: 1px solid var(--e6-border);
    background: var(--e6-charcoal-alt);
}

.e6-phase1-header .e6-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.e6-phase1-brand {
    font-family: var(--e6-font-display);
    font-weight: 600;
    font-size: var(--e6-fs-xl);
    letter-spacing: 0.1em;
    color: var(--e6-white);
}

.e6-phase1-brand .brace {
    color: var(--e6-signal);
}

.e6-phase1-brand .tagline {
    display: block;
    font-family: var(--e6-font-mono);
    font-size: var(--e6-fs-xs);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--e6-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
}

/* Phase 1 minimal main content area */
.e6-phase1-main {
    min-height: calc(100vh - 200px);
    padding: var(--e6-space-12) 0;
}

/* Phase 1 minimal footer */
.e6-phase1-footer {
    padding: var(--e6-space-8) 0;
    border-top: 1px solid var(--e6-border);
    background: var(--e6-charcoal-alt);
    text-align: center;
    color: var(--e6-text-muted);
    font-size: var(--e6-fs-sm);
}

.e6-phase1-footer .brace {
    color: var(--e6-signal);
}

/* Accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--e6-charcoal-alt);
    clip: auto !important;
    clip-path: none;
    color: var(--e6-signal);
    display: block;
    font-size: var(--e6-fs-sm);
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}