/*
Theme Name: CODE{+}MAGIC
Theme URI: https://codemagicsl.com
Author: Eva Marie / Sonoma Sandalwood
Author URI: https://codemagicsl.com
Description: Custom theme for CODE{+}MAGIC — intelligent bot systems and creative scripts for Second Life. Where code meets wonder.
Version: 1.6.0-phase7
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary - All Rights Reserved
License URI: https://codemagicsl.com
Text Domain: codemagic
Tags: dark, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   CODE{+}MAGIC THEME — DESIGN SYSTEM
   Phase 1: Foundation, design tokens, minimal base styles
   ========================================================================== */

:root {
    /* ----- Phase 7: Real Brand Palette (pulled from actual logo) ----- */
    /* Deep midnight — primary background */
    --cm-midnight: #070b14;
    --cm-midnight-deep: #070b14;       /* Same as midnight in Phase 7 */
    --cm-midnight-deeper: #04080f;     /* Darker alternating section bg */
    --cm-midnight-banding: #0a1024;    /* For vertical gradient banding bottom stop */
    --cm-deep-navy: #0c1228;           /* Slightly bluer mid-tone */
    --cm-navy: #1a2550;                /* Deeper card surface */
    --cm-steel-dark: #2a3a5c;
    --cm-steel: #4a5a7a;

    /* Chrome silver — for primary text and the wordmark */
    --cm-chrome-dark: #889bde;         /* Phase 7: aligned with periwinkle */
    --cm-chrome: #c8d4e8;
    --cm-chrome-bright: #e8eef8;

    /* PHASE 7: REAL ACCENT COLORS — pulled from the actual logo */
    --cm-deep-blue: #3a5ac0;           /* Real logo deep blue */
    --cm-periwinkle: #889bde;          /* Real logo periwinkle highlight */
    --cm-periwinkle-soft: #b0c0e8;     /* Lighter periwinkle for hover/glow */

    /* Legacy "electric" tokens now alias to the real palette so existing
       rules don't break. The names persist; the colors are now correct. */
    --cm-electric-deep: #3a5ac0;
    --cm-electric: #889bde;
    --cm-electric-bright: #b0c0e8;
    --cm-electric-glow: rgba(58, 90, 192, 0.45);
    --cm-electric-glow-soft: rgba(136, 155, 222, 0.18);

    /* Text colors */
    --cm-text: #e8eef8;
    --cm-text-muted: #889bde;
    --cm-text-dim: #5a6885;

    /* Status colors */
    --cm-online: #4ade80;
    --cm-online-glow: rgba(74, 222, 128, 0.6);
    --cm-offline: #4a5568;
    --cm-warning: #fbbf24;
    --cm-danger: #f87171;

    /* Surfaces */
    --cm-surface: rgba(15, 22, 45, 0.6);
    --cm-surface-raised: rgba(20, 30, 60, 0.8);
    --cm-surface-overlay: rgba(7, 11, 20, 0.95);

    /* Borders */
    --cm-border: rgba(136, 155, 222, 0.12);
    --cm-border-hover: rgba(136, 155, 222, 0.35);
    --cm-border-strong: rgba(200, 212, 232, 0.3);

    /* ----- Typography ----- */
    --cm-font-display: 'Orbitron', 'Arial Black', sans-serif;
    --cm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --cm-font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Font sizes — fluid type scale */
    --cm-fs-xs: 0.75rem;     /* 12px */
    --cm-fs-sm: 0.875rem;    /* 14px */
    --cm-fs-base: 1rem;      /* 16px */
    --cm-fs-lg: 1.125rem;    /* 18px */
    --cm-fs-xl: 1.25rem;     /* 20px */
    --cm-fs-2xl: 1.5rem;     /* 24px */
    --cm-fs-3xl: 2rem;       /* 32px */
    --cm-fs-4xl: 2.5rem;     /* 40px */
    --cm-fs-5xl: 3.5rem;     /* 56px */
    --cm-fs-hero: clamp(2.5rem, 6vw, 5rem); /* 40-80px */

    /* ----- Spacing ----- */
    --cm-space-1: 0.25rem;
    --cm-space-2: 0.5rem;
    --cm-space-3: 0.75rem;
    --cm-space-4: 1rem;
    --cm-space-6: 1.5rem;
    --cm-space-8: 2rem;
    --cm-space-12: 3rem;
    --cm-space-16: 4rem;
    --cm-space-24: 6rem;

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

    /* ----- Effects ----- */
    --cm-radius-sm: 4px;
    --cm-radius-md: 8px;
    --cm-radius-lg: 12px;
    --cm-radius-xl: 16px;
    --cm-radius-pill: 100px;

    --cm-shadow-glow: 0 0 20px var(--cm-electric-glow-soft);
    --cm-shadow-glow-strong: 0 0 40px var(--cm-electric-glow);
    --cm-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);

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

    /* ----- Z-index layers ----- */
    --cm-z-nav: 100;
    --cm-z-dropdown: 110;
    --cm-z-modal: 200;
    --cm-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(--cm-midnight);
    color: var(--cm-text);
    font-family: var(--cm-font-body);
    font-size: var(--cm-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 */
.cm-phase1-notice {
    background: linear-gradient(90deg, var(--cm-electric-deep), var(--cm-electric));
    color: var(--cm-midnight);
    padding: 12px 24px;
    text-align: center;
    font-family: var(--cm-font-mono);
    font-size: var(--cm-fs-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--cm-electric-bright);
}

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

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

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

a {
    color: var(--cm-electric);
    text-decoration: none;
    transition: color var(--cm-transition-fast);
}

a:hover {
    color: var(--cm-electric-bright);
}

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

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

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

.cm-phase1-brand {
    font-family: var(--cm-font-display);
    font-weight: 900;
    font-size: var(--cm-fs-xl);
    letter-spacing: 0.1em;
    color: var(--cm-chrome-bright);
}

.cm-phase1-brand .brace {
    color: var(--cm-electric);
}

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

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

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

.cm-phase1-footer .brace {
    color: var(--cm-electric);
}

/* 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(--cm-deep-navy);
    clip: auto !important;
    clip-path: none;
    color: var(--cm-electric);
    display: block;
    font-size: var(--cm-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;
    }
}