/*
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: styles/base.css                                             ║
║  Purpose: CSS Variables, Resets & Base Typography                  ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                         ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. CSS VARIABLES & DESIGN TOKENS
  2. ANIMATIONS & KEYFRAMES
  3. GLOBAL RESETS
  4. TYPOGRAPHY HIERARCHY
  5. ACCESSIBILITY & FOCUS STATES

Extracted from: styles_legacy.css (lines 1-890)
*/

/* ========================================== */
/* 1. CSS VARIABLES & DESIGN TOKENS */
/* ========================================== */
:root {
    /* Brand Palette */
    --rooted-primary: #77883e;
    --rooted-primary-dark: #5f7030;
    --rooted-light: #fbf7ec;
    --rooted-accent: #d4c47c;
    --rooted-neutral: #e8e4d8;
    --rooted-sage: #fbf7ec;
    --rooted-dark: #2e2b28;
    
    /* Status Colors */
    --rooted-success: #77883e;
    --rooted-warning: #ff9800;
    --rooted-danger: #d32f2f;
    
    /* Card & Alert Design Tokens */
    --card-bg-primary: #fbf7ec;
    --card-bg-gradient-light: rgba(119, 136, 62, 0.08);
    --card-bg-gradient-accent: rgba(235, 246, 232, 0.6);
    --card-bg-gradient-accent-soft: rgba(235, 246, 232, 0.5);
    --card-border-primary: #d4c47c;
    --card-border-accent: #77883e;
    --card-border-light: #e0dcd5;
    --card-shadow-subtle: 0 2px 8px rgba(119, 136, 62, 0.1);
    --card-shadow-hover: 0 4px 12px rgba(119, 136, 62, 0.12);
    --card-text-primary: #3e3c38;
    --card-text-secondary: #6b6b6b;
    --card-accent-color: #77883e;
    --card-icon-color: #77883e;
    
    /* Primary Color Opacity Variants */
    --primary-opacity-01: rgba(119, 136, 62, 0.01);
    --primary-opacity-02: rgba(119, 136, 62, 0.02);
    --primary-opacity-03: rgba(119, 136, 62, 0.03);
    --primary-opacity-05: rgba(119, 136, 62, 0.05);
    --primary-opacity-08: rgba(119, 136, 62, 0.08);
    --primary-opacity-10: rgba(119, 136, 62, 0.1);
    --primary-opacity-12: rgba(119, 136, 62, 0.12);
    --primary-opacity-15: rgba(119, 136, 62, 0.15);
    --primary-opacity-20: rgba(119, 136, 62, 0.2);
    --primary-opacity-30: rgba(119, 136, 62, 0.3);
    --primary-opacity-40: rgba(119, 136, 62, 0.4);
    
    /* Accent Color Opacity Variants */
    --accent-opacity-05: rgba(212, 196, 124, 0.05);
    --accent-opacity-10: rgba(212, 196, 124, 0.1);
    --accent-opacity-12: rgba(212, 196, 124, 0.12);
    --accent-opacity-15: rgba(212, 196, 124, 0.15);
    
    /* Dark Color Opacity Variants */
    --dark-opacity-02: rgba(46, 43, 40, 0.02);
    --dark-opacity-05: rgba(46, 43, 40, 0.05);
    --dark-opacity-10: rgba(46, 43, 40, 0.1);
    --dark-opacity-15: rgba(46, 43, 40, 0.15);
    --dark-opacity-20: rgba(46, 43, 40, 0.2);
    --dark-opacity-50: rgba(46, 43, 40, 0.5);
    
    /* Neutral Color Opacity Variants */
    --neutral-opacity-60: rgba(251, 247, 236, 0.6);
    --neutral-opacity-80: rgba(251, 247, 236, 0.8);
    --neutral-opacity-95: rgba(251, 247, 236, 0.95);
    
    /* Status Colors */
    --status-success: #10b981;
    --status-success-dark: #065f46;
    --status-warning: #f59e0b;
    --status-warning-dark: #92400e;
    --status-danger: #ef4444;
    --status-danger-dark: #dc2626;
    --status-danger-darker: #b91c1c;
    --status-inactive: #d1d5db;
    --status-inactive-dark: #6b7280;
    --status-paused: #d4a574;
    --status-completed: #c84c5c;
    
    /* Border & Light Colors */
    --border-light: #e8e4d8;
    --border-dark: #bfb5a8;
    --text-light-grey: #bbb;
    --text-muted-light: #999;
    --primary-light: rgba(119, 136, 62, 0.05);
    --accent-light: rgba(212, 196, 124, 0.05);
    --hover: #fde8a9;
    --radius: 12px;
    
    /* Legacy Support */
    --color-hero-green: #ebf6e8;
    --color-hero-cream: var(--rooted-light);
    --color-hero-peach: #fae2ca;
    --color-hover: #fde8a9;
    --color-button: #77883e;
    
    /* Text Colors */
    --color-text: #2e2b28;
    --color-text-light: #4a4540;
    --color-text-muted: #888888;
    --color-white: var(--rooted-light);
    --text-light: #fbf7ec;  /* Light text for dark backgrounds */
    
    /* Message Bubble Variables - Light Mode (Default) */
    --message-own-bg: linear-gradient(135deg, var(--rooted-primary) 0%, var(--rooted-primary-dark) 100%);
    --message-other-bg: var(--rooted-neutral);
    --message-own-text: #fbf7ec;
    --message-other-text: var(--rooted-dark);
    
    /* Shadow System */
    --shadow-minimal: 0 2px 8px rgba(46, 43, 40, 0.08);
    --shadow-light: 0 8px 24px rgba(46, 43, 40, 0.10);
    --shadow-medium: 0 8px 24px rgba(92, 154, 114, 0.08);
    --shadow-elevated: 0 24px 48px rgba(46, 43, 40, 0.15);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Typography */
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Lora', serif;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Glass-morphism */
    --glass-white: rgba(251, 247, 236, 0.65);
    --glass-light: rgba(251, 247, 236, 0.80);
    --glass-overlay: rgba(251, 247, 236, 0.95);
}

/* ========================================== */
/* 2. ANIMATIONS & KEYFRAMES */
/* ========================================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gentleScale {
    from { transform: scale(1); }
    to { transform: scale(1.015); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================== */
/* 3. GLOBAL RESETS */
/* ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: linear-gradient(135deg, var(--rooted-light) 0%, var(--rooted-light) 100%);
    background-attachment: fixed;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    color-scheme: light;
}

body {
    font-family: var(--font-serif);
    color: var(--color-text);
    background-color: var(--text-light);
    line-height: 1.6;
    position: relative;
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light;
}

/* Dark mode color scheme */
@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
    
    body {
        color-scheme: dark;
    }
}

/* Logo Watermark */
body::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    width: 1600px;
    height: 1600px;
    background: url('../assets/logo_large.webp') center/contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================== */
/* 4. TYPOGRAPHY HIERARCHY */
/* ========================================== */

/* DEFAULT TEXT COLOR - ALL ELEMENTS */
body,
p, span, div, li, td, th, label, 
article, section, aside, footer, header, nav,
.article-card, .article-card *, 
.box-highlight, .box-plant, .checklist-box,
.timeline, .timeline-item {
    color: var(--color-text);
}

/* HEADINGS - Green for page titles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    color: var(--rooted-primary);
}

h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.5rem; line-height: 1.3; font-weight: var(--font-weight-semibold); }
h3 { font-size: 1.2rem; line-height: 1.4; font-weight: var(--font-weight-semibold); }

p {
    margin-bottom: 1rem;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

a {
    color: var(--color-button);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover:not(.hero-cta):not(.btn):not(.btn-primary):not(.btn-secondary):not(.back-button) {
    color: var(--rooted-primary);
}

/* ========================================== */
/* 5. ACCESSIBILITY & FOCUS STATES */
/* ========================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--rooted-accent);
    outline-offset: 2px;
}

/* Global checkbox styling for all checkboxes across the app */
input[type="checkbox"] {
    appearance: checkbox;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    cursor: pointer;
    flex-shrink: 0;
    pointer-events: auto;
}

/* 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;
    }
}

/* Dark mode support */


/* High contrast */
@media (prefers-contrast: high) {
    :root {
        --shadow-minimal: 0 2px 8px rgba(0, 0, 0, 0.20);
        --shadow-light: 0 8px 24px rgba(0, 0, 0, 0.25);
        --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.20);
    }
    .glass, .glass-light { background: rgba(251, 247, 236, 0.95); }
}

/* Responsive Watermark Scaling */
@media (max-width: 1024px) {
    body::before { width: 1200px; height: 1200px; opacity: 0.06; }
}

@media (max-width: 768px) {
    body::before { width: 900px; height: 900px; opacity: 0.07; }
}

@media (max-width: 480px) {
    body::before { width: 700px; height: 700px; opacity: 0.08; }
}

/* ========================================== */
/* 5. ACCESSIBILITY & FOCUS STATES */
/* ========================================== */

/* Base badge styles */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

/* Status badge variants */
.status-badge--hired {
    background: var(--rooted-primary);
    color: #ffffff;
}

.status-badge--reviewed {
    background: var(--rooted-accent);
    color: #1a1714;
}

.status-badge--declined {
    background: #e8e4d8;
    color: #1a1714;
}

.status-badge--blocked {
    background: #7a7a7a;
    color: #ffffff;
}

/* ========================================== */
/* SKIP TO MAIN CONTENT LINK (WCAG 2.4.1) */
/* ========================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #77883e;
    color: #fbf7ec;
    padding: 0.75rem 1.5rem;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .skip-link {
        transition: top 0.2s ease;
    }
}