/* ============================================================
   HTML Workspace Design System — CSS Token Template
   Copy this :root block into every project's css/styles.css
   ============================================================ */

:root {
    /* ===== Spacing Scale (8px base, 4px half-steps) ===== */
    --space-0: 0;
    --space-025: 0.125rem;  /*  2px — hairline adjustments */
    --space-050: 0.25rem;   /*  4px — fine-tuning, small icon gaps */
    --space-075: 0.375rem;  /*  6px — tight padding (badges, tags) */
    --space-100: 0.5rem;    /*  8px — BASE UNIT */
    --space-150: 0.75rem;   /* 12px — button padding, small card gaps */
    --space-200: 1rem;       /* 16px — default gap, paragraph spacing */
    --space-250: 1.25rem;    /* 20px — larger button padding */
    --space-300: 1.5rem;     /* 24px — section-internal, gutters, card padding */
    --space-400: 2rem;       /* 32px — between cards, medium section padding */
    --space-500: 2.5rem;     /* 40px — section padding (top/bottom) */
    --space-600: 3rem;       /* 48px — large section padding */
    --space-800: 4rem;      /* 64px — between major sections */
    --space-1000: 5rem;      /* 80px — hero spacing, page-level gaps */

    /* ===== Typography Scale (1.25 modular ratio) ===== */
    --text-xs: 0.75rem;     /* 12px — captions, labels */
    --text-sm: 0.875rem;    /* 14px — secondary text */
    --text-base: 1rem;      /* 16px — BODY TEXT (default) */
    --text-md: 1.125rem;   /* 18px — lead paragraphs */
    --text-lg: 1.25rem;    /* 20px — subheadings, card titles */
    --text-xl: 1.5rem;      /* 24px — H3, section sub-titles */
    --text-2xl: 1.875rem;   /* 30px — H2 */
    --text-3xl: 2.25rem;    /* 36px — H1 */
    --text-4xl: 3rem;       /* 48px — hero headings */
    --text-5xl: 3.75rem;    /* 60px — display */
    --text-6xl: 4.5rem;     /* 72px — large display */

    /* ===== Line Heights ===== */
    --leading-tight: 1.1;    /* hero headlines */
    --leading-section: 1.15; /* section headings */
    --leading-snug: 1.2;     /* subheadings */
    --leading-heading: 1.25; /* detail headings (h4) */
    --leading-normal: 1.5;   /* body text */
    --leading-relaxed: 1.6;  /* long-form reading */
    --leading-loose: 1.8;    /* blue-collar readability (service pages) */

    /* ===== Fluid Typography (clamp with rem floors/ceilings) =====
       Full scale: hero + h1-h6 + body. All middle values include a rem term
       for user-zoom accessibility. Refined formulas adapted from the
       Elementor v4 agency framework (tuned for local business sites). */
    --text-hero-fluid: clamp(3rem, 8vw + 1rem, 4.5rem);          /* 48px → 72px */
    --text-h1-fluid:   clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem); /* 34px → 52px */
    --text-h2-fluid:   clamp(1.875rem, 1.4rem + 1.6vw, 2.6rem);  /* 30px → 42px */
    --text-h3-fluid:   clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);  /* 24px → 34px */
    --text-h4-fluid:   clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); /* 20px → 26px */
    --text-h5-fluid:   clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); /* 18px → 22px */
    --text-h6-fluid:   clamp(1rem, 0.98rem + 0.2vw, 1.125rem);   /* 16px → 18px */
    --text-body-fluid: clamp(1.0625rem, 0.95rem + 0.25vw, 1.125rem); /* 17px → 18px */

    /* ===== Container Widths ===== */
    --container-sm: min(90%, 800px);   /* text-heavy */
    --container-md: min(90%, 1024px);  /* standard */
    --container-lg: min(90%, 1200px);  /* default */
    --container-xl: min(90%, 1440px);  /* wide */
    --container-prose: min(90%, 65ch); /* text measure */

    /* ===== Border Radius ===== */
    --radius-sm: 4px;    /* tags, badges */
    --radius-md: 8px;    /* buttons, inputs */
    --radius-lg: 12px;   /* cards, modals */
    --radius-xl: 16px;   /* large cards */
    --radius-full: 9999px; /* pills, circles */

    /* ===== Gutters ===== */
    --gutter-mobile: var(--space-200);   /* 16px */
    --gutter-tablet: var(--space-300);   /* 24px */
    --gutter-desktop: var(--space-300); /* 24px */

    /* ===== Breakpoints (em-based for user-zoom awareness) ===== */
    --bp-tablet: 48em;   /*  768px */
    --bp-desktop: 64em;  /* 1024px */
    --bp-wide: 80em;     /* 1280px */

    /* ===== Z-Index Scale ===== */
    --z-base: 0;        /* normal flow */
    --z-dropdown: 100;  /* dropdowns, mobile nav */
    --z-sticky: 200;    /* sticky headers */
    --z-overlay: 300;   /* tooltips, popovers */
    --z-modal: 400;     /* modals, dialogs */
    --z-toast: 500;     /* toasts, notifications */

    /* ===== Semantic Colors (set per project) ===== */
    --color-primary: #0066cc;
    --color-primary-dark: #004999;
    --color-text: #1a1a1a;
    --color-text-secondary: #555555;
    --color-text-inverse: #ffffff;
    --color-text-muted: #6b7280;
    --color-bg: #ffffff;
    --color-surface: #f9fafb;
    --color-surface-elevated: #ffffff;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-border: #e5e7eb;
    --color-border-subtle: rgba(0, 0, 0, 0.08);
    --color-border-strong: rgba(0, 0, 0, 0.15);
    --color-border-focus: #0066cc;
    --color-success: #4a7c59;
    --color-success-bg: rgba(74, 124, 89, 0.1);
    --color-error: #c0392b;
    --color-error-bg: rgba(192, 57, 43, 0.1);
    --color-warning: #e67e22;
    --color-warning-bg: rgba(230, 126, 34, 0.1);

    /* ===== Fonts ===== */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;

    /* ===== Motion: Duration Primitives ===== */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;

    /* ===== Motion: Easing Primitives ===== */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-decelerated: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerated: cubic-bezier(0.4, 0, 1, 1);
    --ease-linear: linear;

    /* ===== Motion: Transition Tokens (duration + easing) ===== */
    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-normal: var(--duration-normal) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-standard);

    /* ===== Shadows (6-level scale) ===== */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
}