/* =============================================================================
   IBA Availability Form - Apple HIG-Inspired Design System
   Aligned with admin-v2 design tokens
   Sections: Core Tokens (:root) | Dark Theme (body) | Light Theme Override |
   Token Extensions (fluid type, elevation, z-index, motion, breakpoints)
   ============================================================================= */

:root {
    /* Primary Colors - Zinc Monochrome (from admin-v2) */
    --primary: #71717a;
    --primary-hover: #52525b;
    --primary-light: rgba(113, 113, 122, 0.15);
    --primary-glow: rgba(113, 113, 122, 0.2);

    /* CTA Blue (Apple-style primary actions) */
    --cta-blue: #0071e3;
    --cta-blue-hover: #0077ED;
    --cta-blue-light: rgba(0, 113, 227, 0.12);
    --cta-blue-glow: rgba(0, 113, 227, 0.3);

    /* Semantic Colors */
    --color-success: #34c759;
    --color-success-dark: #30b350;
    --color-success-light: rgba(52, 199, 89, 0.12);
    --color-warning: #ff9f0a;
    --color-warning-dark: #e88e00;
    --color-warning-light: rgba(255, 159, 10, 0.12);
    --color-danger: #ff3b30;
    --color-danger-dark: #e5342b;
    --color-danger-light: rgba(255, 59, 48, 0.12);
    --color-info: #007aff;
    --color-info-light: rgba(0, 122, 255, 0.12);

    /* Legacy Color Mapping */
    --success-green: var(--color-success);
    --danger-red: var(--color-danger);
    --warning-orange: var(--color-warning);

    /* Typography - Apple System Font Stack */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;

    /* Font Sizes - Apple Scale */
    --text-caption2: 0.6875rem;  /* 11px */
    --text-caption1: 0.75rem;    /* 12px */
    --text-footnote: 0.8125rem;  /* 13px */
    --text-subhead: 0.9375rem;   /* 15px */
    --text-body: 1.0625rem;      /* 17px - Apple standard */
    --text-title3: 1.25rem;      /* 20px */
    --text-title2: 1.375rem;     /* 22px */
    --text-title1: 1.75rem;      /* 28px */
    --text-large-title: 2.125rem;/* 34px */

    /* Spacing - 8pt Grid */
    --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 */

    /* Border Radius - Apple Scale */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Easing Curves - Apple-style */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring: cubic-bezier(0.5, 1.25, 0.75, 1.25);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Transitions */
    --transition-fast: 100ms var(--ease-out);
    --transition-normal: 200ms var(--ease-out);
    --transition-slow: 300ms var(--ease-out);
    --transition-spring: 350ms var(--ease-spring);

    /* Touch Targets */
    --touch-target: 44px;
    --touch-target-sm: 36px;
}

/* Dark Theme (Default) - Apple-inspired */
body {
    --bg-base: #000000;
    --bg-surface: #1c1c1e;
    --bg-surface-2: #2c2c2e;
    --bg-surface-3: #3a3a3c;
    --bg-surface-hover: rgba(255, 255, 255, 0.06);
    --bg-gradient: linear-gradient(180deg, #1c1c1e 0%, #000000 100%);
    --bg-vibrancy: rgba(28, 28, 30, 0.72);

    --text-primary: #ffffff;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --text-muted: rgba(235, 235, 245, 0.55); /* 0.55 alpha keeps hints AA-readable on surfaces */
    --text-link: #409cff; /* blue as TEXT needs ~6:1 on dark surfaces; cta-blue is button-only */

    --border-color: rgba(84, 84, 88, 0.65);
    --border-subtle: rgba(84, 84, 88, 0.36);
    --border-hairline: rgba(84, 84, 88, 0.25);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg: 0 12px 28px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-modal: 0 24px 80px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3);

    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Light Theme Support */
@media (prefers-color-scheme: light) {
    /* Light canvas for overscroll/rubber-band areas on auto-theme pages only */
    html:has(body.auto-theme) {
        color-scheme: light;
    }

    body.auto-theme {
        color-scheme: light; /* native form controls follow the active theme */

        --bg-base: #f0f0f5;
        --bg-surface: #ffffff;
        --bg-surface-2: #eeeef3;
        --bg-surface-3: #e5e5ea;
        --bg-surface-hover: rgba(0, 0, 0, 0.04);
        --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f0f0f5 100%);
        --bg-vibrancy: rgba(255, 255, 255, 0.72);

        --text-primary: #000000;
        --text-secondary: rgba(60, 60, 67, 0.6);
        --text-muted: rgba(60, 60, 67, 0.72); /* blends to ~#77777f on white — 4.5:1 AA */
        --text-link: #0071e3; /* 4.6:1 on white */

        --border-color: rgba(60, 60, 67, 0.36);
        --border-subtle: rgba(60, 60, 67, 0.18);
        --border-hairline: rgba(60, 60, 67, 0.12);

        --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
        --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
        --shadow-lg: 0 8px 24px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
        --shadow-card: 0 1px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
        --shadow-modal: 0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

        --shadow-color: rgba(0, 0, 0, 0.1);
    }
}

/* =============================================================================
   Design Token Extensions (UI facelift foundation)

   Breakpoints (media queries cannot use CSS vars — documented here):
     480px  — phone max (legacy max-width: 480px adjustments)
     768px  — tablet (current tablet band is 481px–768px)
     1024px — desktop two-column layouts (added in facelift)
     1440px — wide desktop
   ============================================================================= */

:root {
    /* Fluid Type — title scale interpolates phone -> desktop (clamps preserve
       existing desktop sizes; phones get marginally tighter headings) */
    --text-title3: clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem);   /* 18 -> 20px */
    --text-title2: clamp(1.25rem, 1.19rem + 0.3vw, 1.375rem);    /* 20 -> 22px */
    --text-title1: clamp(1.5rem, 1.39rem + 0.55vw, 1.75rem);     /* 24 -> 28px */
    --text-large-title: clamp(1.75rem, 1.55rem + 1vw, 2.125rem); /* 28 -> 34px */

    /* Elevation Ladder — pair with: border: 0.5px solid var(--border-hairline) */
    --elevation-1: var(--shadow-card);   /* resting card */
    --elevation-2: var(--shadow-md);     /* raised card / popover */
    --elevation-3: var(--shadow-lg);     /* sheet / floating toolbar */
    --elevation-4: var(--shadow-modal);  /* modal / dialog */

    /* Z-Index Scale */
    --z-modal: 1000;          /* frosted-glass modal */
    --z-popup: 1001;          /* status selection popup (above modal) */
    --z-toolbar: 1500;        /* floating paste toolbar */
    --z-sheet-overlay: 2000;  /* bottom sheet scrim */
    --z-sheet: 2001;          /* bottom sheet panel */
    --z-toast: 3000;          /* toast notifications */
    --z-overlay: 10000;       /* full-screen submission overlay */

    /* Motion */
    --duration-fast: 100ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}