/**
 * Design System Variables
 * Unified color palette, typography, and spacing for consistent styling
 */

:root {
    /* ============================================
       PRIMARY BRAND COLORS (Based on #28a745)
       ============================================ */
    --color-primary: #28a745;
    --color-primary-dark: #218838;
    --color-primary-light: #34c759;
    --color-primary-subtle: rgba(40, 167, 69, 0.1);
    --color-primary-hover: #1e7e34;

    /* ============================================
       NEUTRAL BACKGROUNDS
       ============================================ */
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-lighter: #f9fafb;
    --bg-warm: #f5f2ed;
    --bg-gray: #f1f3f4;

    /* ============================================
       TEXT COLORS
       ============================================ */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6b7280;
    --text-light: #6b7280;  /* Darkened from #9ca3af for better contrast (elderly users) */
    --text-white: #ffffff;

    /* Legacy text colors for gradual migration */
    --text-333: #333333;
    --text-555: #555555;
    --text-666: #666666;

    /* ============================================
       SEMANTIC COLORS
       ============================================ */
    --color-success: #28a745;
    --color-info: #17a2b8;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-vipps: #ff5100;

    /* ============================================
       UI ELEMENT COLORS
       ============================================ */
    --border-color: #e5e7eb;
    --border-color-dark: #d1d5db;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* Footer specific */
    --footer-bg: #2d2d2d;
    --footer-text: #d1d1d1;

    /* ============================================
       TYPOGRAPHY SCALE - DESKTOP (1024px+)
       ============================================ */
    --font-family-base: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-fallback: Arial, sans-serif;

    /* Heading sizes */
    --font-size-h1: 3rem;           /* 48px */
    --font-size-h2: 2.25rem;        /* 36px */
    --font-size-h3: 1.75rem;        /* 28px */
    --font-size-h4: 1.375rem;       /* 22px */

    /* Body text sizes */
    --font-size-body-xl: 1.25rem;   /* 20px */
    --font-size-body-lg: 1.125rem;  /* 18px */
    --font-size-body: 1.125rem;     /* 18px - Increased for elderly users */
    --font-size-body-sm: 1rem;      /* 16px - Increased for elderly users */
    --font-size-body-xs: 0.875rem;  /* 14px - Increased from 12px for elderly users */

    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ============================================
       SPACING SCALE
       ============================================ */
    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 1rem;        /* 16px */
    --space-md: 1.5rem;      /* 24px */
    --space-lg: 2.5rem;      /* 40px */
    --space-xl: 4rem;        /* 64px */
    --space-2xl: 6rem;       /* 96px */

    /* Section padding */
    --section-padding-y: 5rem;      /* 80px */
    --section-padding-x: 5%;

    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-go-to-top: 1100;
    --z-modal-backdrop: 1500;
    --z-modal: 2000;
    --z-tooltip: 3000;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY - TABLET
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
    :root {
        --font-size-h1: 2.5rem;         /* 40px */
        --font-size-h2: 2rem;           /* 32px */
        --font-size-h3: 1.5rem;         /* 24px */
        --font-size-h4: 1.25rem;        /* 20px */
        --font-size-body-lg: 1.125rem;  /* 18px - Increased for elderly users */

        --section-padding-y: 4rem;      /* 64px */
    }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY - MOBILE
   ============================================ */
@media (max-width: 768px) {
    :root {
        --font-size-h1: 2rem;           /* 32px */
        --font-size-h2: 1.75rem;        /* 28px */
        --font-size-h3: 1.375rem;       /* 22px */
        --font-size-h4: 1.125rem;       /* 18px */
        --font-size-body-lg: 1.0625rem; /* 17px */
        --font-size-body: 1.125rem;     /* 18px - Increased for elderly users */

        --section-padding-y: 3.75rem;   /* 60px */
        --section-padding-x: 4%;
    }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY - SMALL MOBILE
   ============================================ */
@media (max-width: 480px) {
    :root {
        --font-size-h1: 1.75rem;        /* 28px */
        --font-size-h2: 1.5rem;         /* 24px */
        --font-size-h3: 1.25rem;        /* 20px */
        --font-size-body-lg: 1rem;      /* 16px */

        --section-padding-y: 2.5rem;    /* 40px */
        --space-lg: 2rem;               /* 32px */
        --space-xl: 3rem;               /* 48px */
    }
}