/*
 * AluScout Design System
 * Foundation tokens for consistent UI styling
 *
 * This file defines the core design tokens used throughout the application.
 * Import this file BEFORE style.css and themes.css in base.html.
 */

/* ===========================
   TYPOGRAPHY
   =========================== */

:root {
    /* Font Family - Maritime Precision Aesthetic */
    --font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

    /* Font Sizes - WCAG AA Compliant (12px minimum) */
    --font-xs: 0.75rem;      /* 12px - MINIMUM for accessibility - labels, captions */
    --font-sm: 0.875rem;     /* 14px - secondary text, helper text */
    --font-base: 1rem;       /* 16px - body text (increased from 14px) */
    --font-md: 1.125rem;     /* 18px - headings, emphasis */
    --font-lg: 1.25rem;      /* 20px - section titles */
    --font-xl: 1.5rem;       /* 24px - page titles */
    --font-2xl: 2rem;        /* 32px - hero titles */
    --font-3xl: 2.625rem;    /* 42px - large hero */

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

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
}

/* ===========================
   SPACING SCALE
   =========================== */

:root {
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
}

/* ===========================
   BORDER RADIUS
   =========================== */

:root {
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
}

/* ===========================
   SHADOWS
   =========================== */

:root {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
}

/* Dark mode shadow adjustments */
[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* ===========================
   TRANSITIONS
   =========================== */

:root {
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-theme: 0.25s ease;
}

/* ===========================
   Z-INDEX SCALE
   =========================== */

:root {
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 1100;
}

/* ===========================
   FORM ELEMENT SIZING
   =========================== */

:root {
    /* Input heights */
    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;

    /* Checkbox/Radio sizes */
    --checkbox-size: 20px;
    --checkbox-size-sm: 16px;
    --checkbox-size-lg: 24px;

    /* Border widths */
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 3px;
}

/* ===========================
   COMPONENT-SPECIFIC TOKENS
   =========================== */

:root {
    /* Cards */
    --card-padding: var(--space-6);
    --card-padding-sm: var(--space-4);
    --card-gap: var(--space-4);

    /* Buttons */
    --btn-padding-x: var(--space-6);
    --btn-padding-y: var(--space-3);
    --btn-padding-x-sm: var(--space-4);
    --btn-padding-y-sm: var(--space-2);

    /* Form fields */
    --field-padding-x: var(--space-3);
    --field-padding-y: var(--space-3);
    --field-gap: var(--space-2);

    /* Grid gaps */
    --grid-gap-sm: var(--space-2);
    --grid-gap-md: var(--space-4);
    --grid-gap-lg: var(--space-6);
}

/* ===========================
   EXTENDED COLOR TOKENS
   =========================== */

:root {
    /* Input-specific colors (light mode) */
    --input-bg: #ffffff;
    --input-border: rgba(0, 0, 0, 0.15);
    --input-border-hover: rgba(0, 0, 0, 0.25);
    --input-border-focus: var(--interactive);
    --input-placeholder: rgba(0, 0, 0, 0.4);

    /* Stronger border for visibility */
    --border-strong: rgba(0, 0, 0, 0.2);
    --border-subtle: rgba(0, 0, 0, 0.08);

    /* Divider colors */
    --divider: rgba(0, 0, 0, 0.08);
    --divider-strong: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
    /* Input-specific colors (dark mode) */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.15);
    --input-border-hover: rgba(255, 255, 255, 0.25);
    --input-border-focus: var(--interactive);
    --input-placeholder: rgba(255, 255, 255, 0.4);

    /* Stronger border for visibility */
    --border-strong: rgba(255, 255, 255, 0.2);
    --border-subtle: rgba(255, 255, 255, 0.06);

    /* Divider colors */
    --divider: rgba(255, 255, 255, 0.06);
    --divider-strong: rgba(255, 255, 255, 0.12);
}

/* ===========================
   ACCESSIBILITY TOKENS
   =========================== */

:root {
    /* Focus ring specifications */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--interactive, #0369A1);
    --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
}

[data-theme="dark"] {
    --focus-ring-color: var(--interactive, #0EA5E9);
}

/* Screen reader only text */
.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;
}

/* Skip navigation link for keyboard accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--interactive);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 9999;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid white;
    outline-offset: 2px;
}

/* ===========================
   ANIMATION KEYFRAMES
   =========================== */

@keyframes checkmark-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ===========================
   RESPONSIVE FONT SCALING
   =========================== */
/* Increase font sizes on mobile for better readability */
@media (max-width: 768px) {
    :root {
        --font-xs: 0.8125rem;    /* 13px on mobile */
        --font-sm: 0.9375rem;    /* 15px on mobile */
        --font-base: 1.0625rem;  /* 17px on mobile */
    }
}