/**
 * Section Platform - Core Styles
 * 
 * 🏗️ Architecture:
 * • Minimal reset and normalization only
 * • Design tokens (CSS custom properties)
 * • Truly shared utilities (no section-specific logic)
 * • Brand-agnostic (neutral core - brand colors in variants only)
 * • Must remain under 5KB (combined with core.js)
 * 
 * 🛡️ Security:
 * • No external URLs or remote resources (except fonts)
 * • No dynamic CSS generation
 * • All values are static
 * 
 * 🎨 Brand Integration:
 * • Font family references (Harir loaded locally)
 * • Colors are NOT defined here (live in variants)
 * 
 * @package Section_Platform
 * @since 0.1.0-MVP
 * @version 1.0.0
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS RESET (Minimal)
   Only essential resets for cross-browser consistency
   ───────────────────────────────────────────────────────────────────────────── */

/* Box sizing for all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin on body */
body {
    margin: 0;
}

/* Ensure images are responsive by default */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent overflow on pre/code elements */
pre,
code {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY RESET
   Basic typography normalization
   ───────────────────────────────────────────────────────────────────────────── */

/* Ensure consistent font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

/* Ensure headings have no default margin */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: normal;
}

/* Ensure paragraphs have no default margin */
p {
    margin: 0;
}

/* Ensure links have no default underline */
a {
    text-decoration: none;
    color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS (CSS Custom Properties)
   Global tokens available to all sections
   These are NEUTRAL - brand colors defined in variants only
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* ──────────────────────────────────────────────────────────────────────────
       SPACING SCALE
       Consistent spacing system across all sections
       ────────────────────────────────────────────────────────────────────────── */
    --sp-spacing-0: 0;
    --sp-spacing-xs: 0.25rem;  /* 4px */
    --sp-spacing-sm: 0.5rem;   /* 8px */
    --sp-spacing-md: 1rem;     /* 16px */
    --sp-spacing-lg: 1.5rem;   /* 24px */
    --sp-spacing-xl: 2rem;     /* 32px */
    --sp-spacing-2xl: 3rem;    /* 48px */
    --sp-spacing-3xl: 4rem;    /* 64px */
    
    /* ──────────────────────────────────────────────────────────────────────────
       TYPOGRAPHY SCALE
       Base font sizes and line heights
       ────────────────────────────────────────────────────────────────────────── */
    --sp-font-size-xs: 0.75rem;    /* 12px */
    --sp-font-size-sm: 0.875rem;   /* 14px */
    --sp-font-size-base: 1rem;     /* 16px */
    --sp-font-size-lg: 1.125rem;   /* 18px */
    --sp-font-size-xl: 1.25rem;    /* 20px */
    --sp-font-size-2xl: 1.5rem;    /* 24px */
    --sp-font-size-3xl: 2rem;      /* 32px */
    --sp-font-size-4xl: 2.5rem;    /* 40px */
    
    --sp-line-height-tight: 1.2;
    --sp-line-height-normal: 1.5;
    --sp-line-height-relaxed: 1.75;
    
    --sp-font-weight-normal: 400;
    --sp-font-weight-medium: 500;
    --sp-font-weight-semibold: 600;
    --sp-font-weight-bold: 700;
    
    /* ──────────────────────────────────────────────────────────────────────────
       BORDER RADIUS
       Consistent corner rounding
       ────────────────────────────────────────────────────────────────────────── */
    --sp-radius-none: 0;
    --sp-radius-sm: 0.25rem;   /* 4px */
    --sp-radius-md: 0.5rem;    /* 8px */
    --sp-radius-lg: 1rem;      /* 16px */
    --sp-radius-xl: 1.5rem;    /* 24px */
    --sp-radius-2xl: 2rem;     /* 32px */
    --sp-radius-full: 9999px;  /* Pill/circle */
    
    /* ──────────────────────────────────────────────────────────────────────────
       TRANSITIONS
       Consistent animation timing
       ────────────────────────────────────────────────────────────────────────── */
    --sp-transition-fast: 150ms ease;
    --sp-transition-normal: 250ms ease;
    --sp-transition-slow: 350ms ease;
    
    /* ──────────────────────────────────────────────────────────────────────────
       LAYOUT
       Container widths and breakpoints
       ────────────────────────────────────────────────────────────────────────── */
    --sp-container-sm: 640px;
    --sp-container-md: 768px;
    --sp-container-lg: 1024px;
    --sp-container-xl: 1280px;
    --sp-container-2xl: 1536px;
    
    /* ──────────────────────────────────────────────────────────────────────────
       SHADOWS
       Subtle elevation system
       ────────────────────────────────────────────────────────────────────────── */
    --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* ──────────────────────────────────────────────────────────────────────────
       Z-INDEX SCALE
       Consistent layering system
       ────────────────────────────────────────────────────────────────────────── */
    --sp-z-index-base: 0;
    --sp-z-index-dropdown: 100;
    --sp-z-index-sticky: 200;
    --sp-z-index-fixed: 300;
    --sp-z-index-modal: 400;
    --sp-z-index-tooltip: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FONT LOADING (Harir Font - Ghorob Najran Brand)
   Font files should be placed in assets/fonts/harir/
   ───────────────────────────────────────────────────────────────────────────── */

/* Harir Font Faces */
@font-face {
    font-family: 'Harir';
    src: url('../fonts/harir/Harir-Regular.woff2') format('woff2'),
         url('../fonts/harir/Harir-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Harir';
    src: url('../fonts/harir/Harir-Medium.woff2') format('woff2'),
         url('../fonts/harir/Harir-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Harir';
    src: url('../fonts/harir/Harir-SemiBold.woff2') format('woff2'),
         url('../fonts/harir/Harir-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Harir';
    src: url('../fonts/harir/Harir-Bold.woff2') format('woff2'),
         url('../fonts/harir/Harir-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Fallback font stack for Arabic */
body {
    font-family: 'Harir', 'Tajawal', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITY CLASSES (Truly Shared)
   Only utilities that are genuinely reusable across all sections
   ───────────────────────────────────────────────────────────────────────────── */

/* Screen reader only (accessibility) */
.sp-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;
}

/* Clearfix utility */
.sp-clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* Container utility */
.sp-container {
    width: 100%;
    max-width: var(--sp-container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-spacing-md);
    padding-right: var(--sp-spacing-md);
}

/* Flex utilities */
.sp-flex {
    display: flex;
}

.sp-flex-col {
    flex-direction: column;
}

.sp-items-center {
    align-items: center;
}

.sp-justify-center {
    justify-content: center;
}

.sp-gap-sm {
    gap: var(--sp-spacing-sm);
}

.sp-gap-md {
    gap: var(--sp-spacing-md);
}

.sp-gap-lg {
    gap: var(--sp-spacing-lg);
}

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

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

.sp-text-left {
    text-align: left;
}

/* Visibility utilities */
.sp-hidden {
    display: none;
}

.sp-invisible {
    visibility: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY UTILITIES
   Focus states and reduced motion support
   ───────────────────────────────────────────────────────────────────────────── */

/* Focus visible for keyboard navigation */
.sp-focus-visible:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Reduced motion support */
@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;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT STYLES (Basic)
   Essential print optimizations
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
    /* Hide non-essential elements */
    .sp-no-print {
        display: none !important;
    }
    
    /* Ensure text is black on white for printing */
    body {
        background: #fff !important;
        color: #000 !important;
    }
    
    /* Prevent page breaks inside elements */
    .sp-no-break {
        page-break-inside: avoid;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RTL SUPPORT (Arabic)
   Base RTL direction for Arabic content
   ───────────────────────────────────────────────────────────────────────────── */

/* Default RTL for Arabic sites */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HIGH CONTRAST MODE
   Support for Windows High Contrast Mode
   ───────────────────────────────────────────────────────────────────────────── */

@media (forced-colors: active) {
    /* Ensure all interactive elements have visible borders */
    a,
    button,
    [role="button"] {
        border: 2px solid currentColor;
    }
    
    /* Ensure text remains readable */
    * {
        background: transparent !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE SUPPORT (Optional - Future Enhancement)
   Base structure for dark mode (not activated by default)
   ───────────────────────────────────────────────────────────────────────────── */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --sp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
}
*/

/* ─────────────────────────────────────────────────────────────────────────────
   END OF CORE STYLES
   All section-specific styles live in variant style.css files
   ───────────────────────────────────────────────────────────────────────────── */