/*
FILE: base.css
RESPONSIBILITY: CSS Reset + Base utilities
PHASE: B1 — ASSETS SKELETON
ROLE: Spatial foundation (no layout, no components)

CRITICAL RULES:
✓ CSS reset (normalize browser defaults)
✓ Base utilities (helper classes)
✗ NO layout structures
✗ NO component-specific styles
✗ NO mode-specific styles
*/

/* ============================================================================
   CSS RESET — MODERN NORMALIZATION
   ============================================================================
   Purpose: Consistent baseline across all browsers
   Approach: Minimal, non-opinionated reset
   ========================================================================= */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.5;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-surface-primary);
    overflow-x: hidden;
    /* Force full height structure for 360 app feel */
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

/* Remove default list styles */
ul,
ol {
    list-style: none;
}

/* Remove default anchor styles */
a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

/* Remove default button styles */
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

button:focus {
    outline: none;
}

/* Remove default input styles */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* Image defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Table defaults */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Remove default heading margins */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

/* Paragraph defaults */
p {
    margin: 0;
}

/* Remove default fieldset/legend styles */
fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

legend {
    padding: 0;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================
   Purpose: Screen reader support and focus indicators
   ========================================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: var(--z-max);
    padding: var(--space-4);
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    transition: top var(--duration-fast) var(--ease-out);
}

.skip-to-main:focus {
    top: 0;
}

/* Focus visible (modern browsers) */
:focus-visible {
    outline: 2px solid var(--color-interactive-default);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================
   Purpose: Single-purpose helper classes
   ========================================================================= */

/* Display utilities */
.hidden {
    display: none !important;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

/* Visibility utilities */
.invisible {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

/* Opacity utilities */
.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-100 {
    opacity: 1;
}

/* Pointer events */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* Text utilities */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Position utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* Overflow utilities */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* Cursor utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

/* User select */
.select-none {
    user-select: none;
}

.select-all {
    user-select: all;
}

/* ============================================================================
   TRANSITIONS & ANIMATIONS — BASE DEFINITIONS
   ============================================================================
   Purpose: Reusable transition patterns
   ========================================================================= */

.transition-all {
    transition-property: all;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-normal);
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-normal);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-normal);
}

.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-normal);
}

/* ============================================================================
   WORDPRESS-SPECIFIC OVERRIDES
   ============================================================================
   Purpose: Neutralize WordPress default output
   ========================================================================= */

/* Remove WordPress admin bar spacing */
html {
    margin-top: 0 !important;
}

body.admin-bar {
    margin-top: 0 !important;
}

/* WordPress alignment classes (for Gutenberg compatibility if needed) */
.alignleft {
    float: left;
    margin-right: var(--space-4);
}

.alignright {
    float: right;
    margin-left: var(--space-4);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Clear float utility */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================
   Purpose: Hardware acceleration hints
   ========================================================================= */

.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* ============================================================================
   END OF BASE.CSS
   ============================================================================
   
   CRITICAL VALIDATION:
   ✓ CSS reset implemented
   ✓ Base utilities created
   ✓ Accessibility helpers added
   ✓ WordPress overrides included
   ✗ NO layout structures
   ✗ NO component styles
   ✗ NO mode-specific styles
   
   Next Phase: B2 — layout.css (Spatial structure)
   ========================================================================= */