/**
 * MedGas Library - Lantern Medical Theme
 * Brand-aligned design system for medical gas training platform
 * 
 * REFACTORED: Phase 1 & 2 Complete
 * - Phase 1: Foundation & Base Styles (CSS variables, typography)
 * - Phase 2: Components (buttons, cards, notices)
 * All core styles are now in separate modules for better maintainability.
 */

/* ==========================================================================
   Modular CSS Architecture
   Core tokens/base/components are enqueued as separate stylesheets in PHP
   (see `functions.php`) to avoid relying on CSS `@import`, which can be broken
   by some optimization/caching pipelines on public (logged-out) pages.
   ========================================================================== */

/* ==========================================================================
   FALLBACK: CSS Custom Properties (Design Tokens)
   Why duplicated here?
   - Some optimization/caching pipelines (often only for logged-out/public users)
     can break relative `@import` URLs after CSS is moved/combined.
   - When the imports fail, all `var(--token)` usages become invalid and large
     portions of the theme appear “unstyled” (e.g. missing teal, spacing, etc).
   This fallback keeps the site usable even if `@import` partials fail to load.
   ========================================================================== */

:root {
    /* Brand Colors - Lantern Medical */
    --color-primary: #1E6A7F;        /* Lantern Teal - Professional, trustworthy */
    --color-primary-dark: #164F5E;   /* Darker teal for hover states */
    --color-primary-light: #2A8BA3;  /* Lighter teal for backgrounds */
    --color-accent: #F4C542;         /* Lantern Gold - Warmth, illumination */
    --color-accent-dark: #D4A525;    /* Darker gold for hover */
    --color-accent-light: #F8D876;   /* Lighter gold for highlights */

    /* Supporting Colors */
    --color-success: #28a745;        /* Success states */
    --color-warning: #ffc107;        /* Warning states */
    --color-danger: #dc3545;         /* Error states */
    --color-info: #2A8BA3;          /* Info (light teal) */

    /* Neutral Colors */
    --color-text: #2C3E50;           /* Dark blue-gray for text */
    --color-text-light: #5A6C7D;     /* Lighter text */
    --color-text-lighter: #8B9DAA;   /* Even lighter text */
    --color-text-white: #FFFFFF;     /* White text on dark backgrounds */

    --color-bg: #FFFFFF;             /* White background */
    --color-bg-alt: #F5F8FA;         /* Light gray-blue background */
    --color-bg-light: #FAFBFC;       /* Very light background */
    --color-bg-dark: #1E6A7F;        /* Primary teal for dark sections */
    --color-bg-darker: #164F5E;      /* Darker teal for footer */

    --color-border: #D5E1E8;         /* Light border */
    --color-border-light: #E8EFF3;   /* Very light border */
    --color-border-medium: #B0C4D0;  /* Medium border */

    /* Extended: Alpha Color Variants */
    --color-white-alpha-95: rgba(255, 255, 255, 0.95);
    --color-white-alpha-25: rgba(255, 255, 255, 0.25);
    --color-white-alpha-20: rgba(255, 255, 255, 0.2);
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);
    --color-white-alpha-10: rgba(255, 255, 255, 0.1);
    --color-white-alpha-08: rgba(255, 255, 255, 0.08);

    --color-black-alpha-70: rgba(0, 0, 0, 0.7);
    --color-black-alpha-18: rgba(0, 0, 0, 0.18);
    --color-black-alpha-10: rgba(0, 0, 0, 0.1);
    --color-black-alpha-08: rgba(0, 0, 0, 0.08);
    --color-black-alpha-06: rgba(0, 0, 0, 0.06);
    --color-black-alpha-05: rgba(0, 0, 0, 0.05);

    --color-primary-alpha-35: rgba(22, 79, 94, 0.35);
    --color-primary-alpha-10: rgba(30, 106, 127, 0.1);
    --color-accent-alpha-10: rgba(244, 197, 66, 0.1);

    /* Typography - Professional Medical */
    --font-family-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;  /* Elegant serif for H1/H2 */
    --font-family-headings: 'Georgia', 'Times New Roman', serif;  /* Serif for H3-H6 */
    --font-family-body: "Josefin Sans", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-xs: 0.75rem;        /* 12px */
    --font-size-sm: 0.875rem;       /* 14px */
    --font-size-lg: 1.125rem;       /* 18px */
    --line-height-base: 1.6;
    --line-height-headings: 1.3;

    /* Spacing */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-xxl: 4rem;     /* 64px */

    /* Container */
    --container-max-width: 1280px;
    --container-padding: 1.5rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;   /* For pills/circles */

    /* Shadows - Subtle and professional */
    --shadow-sm: 0 1px 3px rgba(30, 106, 127, 0.08);
    --shadow-md: 0 4px 12px rgba(30, 106, 127, 0.12);
    --shadow-lg: 0 8px 24px rgba(30, 106, 127, 0.15);
    --shadow-xl: 0 12px 36px rgba(30, 106, 127, 0.18);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Z-index Scale */
    --z-base: 1;
    --z-raised: 2;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-modal: 1000;
    --z-popover: 10000;
    --z-tooltip: 100000;
}

/* Everything else has been extracted into modular partials and enqueued in PHP
   (`functions.php`). Keep this file lean so the fallback tokens remain reliable. */