/*!
 * @file        base.css
 * @description Foundation styles - reset, variables, typography, utilities
 * @author      Eltryus - Ricardo Marques
 * @copyright   2025-2026 Eltryus - Ricardo Marques
 * @see         {@link https://github.com/RicardoJCMarques/EasyTrace5000}
 * @license     AGPL-3.0-or-later
 */

/*
 * EasyTrace5000 - Advanced PCB Isolation CAM Workspace
 * Copyright (C) 2025-2026 Eltryus
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

/* ============================================================================
   CSS RESET
   ============================================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================================
   ROOT BASELINE
   ============================================================================ */
html {
    font-size: 16px; /* Explicit font-size baseline for rem calculations */
}

/* ============================================================================
   CSS CUSTOM PROPERTIES - Structure & Sizing Only
   Colors loaded from theme JSON via theme-loader.js
   ============================================================================ */
:root {
    /* Layout Dimensions */
    --toolbar-height: 3.375rem;           /* 54px */
    --status-bar-height: 2.75rem;         /* 44px */
    --section-header-height: 2.25rem;     /* 36px */
    
    /* Sidebar widths with responsive clamp */
    --sidebar-left-width: clamp(17.5rem, 20vw, 20rem);    /* 280px-320px */
    --sidebar-right-width: clamp(20rem, 25vw, 23.75rem);  /* 320px-380px */

    /* Spacing Scale */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 0.75rem;    /* 12px */
    --spacing-lg: 1rem;       /* 16px */
    --spacing-xl: 1.5rem;     /* 24px */
    --spacing-xxl: 2rem;      /* 32px */

    /* Border Radius */
    --radius-sm: 0.125rem;    /* 2px */
    --radius: 0.25rem;        /* 4px */
    --radius-md: 0.375rem;    /* 6px */
    --radius-lg: 0.5rem;      /* 8px */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', Consolas, 'Courier New', monospace;
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.8125rem;    /* 13px */
    --font-size-base: 0.875rem;   /* 14px */
    --font-size-lg: 0.9375rem;    /* 15px */
    --font-size-xl: 1.0625rem;    /* 17px */
    --font-size-xxl: 1.1875rem;   /* 19px */
    --line-height-tight: 1.25;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.75;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 800;
    --z-modal: 1000;
    --z-tooltip: 10000;

    /* Touch Targets - converted to rem */
    --touch-target-min: 2.75rem;      /* 44px */
    --touch-target-compact: 2.25rem;  /* 36px */
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-tight);
    font-weight: 600;
}

h1 { font-size: var(--font-size-xxl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-base); }
h5 { font-size: var(--font-size-sm); }
h6 { font-size: var(--font-size-xs); }

code, pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

/* ============================================================================
   SKIP LINK (Accessibility)
   ============================================================================ */
.skip-link {
    position: absolute;
    top: -3rem;
    left: 0;
    background: var(--color-accent-primary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: calc(var(--z-modal) + 10); /* Above modals */
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--radius) 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Tree item focus indicators */
.file-node-content:focus-visible,
.geometry-node-content:focus-visible,
.category-header:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
    border-radius: var(--radius);
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.hidden {
    display: none !important;
}

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

/* Text Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.text-mono { font-family: var(--font-mono); }
.text-bold { font-weight: 600; }
.text-center { text-align: center; }

/* Spacing Utilities */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* ============================================================================
   SCROLLBARS
   ============================================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-disabled);
}

/* ============================================================================
   FOCUS INDICATORS
   ============================================================================ */
*:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ============================================================================
   SVG DEFAULTS
   ============================================================================ */
svg {
    color: inherit;
    vertical-align: middle;
}

svg path,
svg line,
svg circle,
svg rect,
svg polygon,
svg polyline {
    stroke: currentColor;
    fill: none;
}

svg[fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}