/* === Arc Platform — Design System Variables & Reset === */
/* ============================================================
   PDL Portal — Styles
   Matched to reference-dashboard.html visual design system
   ============================================================ */

:root {
    /* ── Apple-neutral foundation ── */
    --bg-primary: #F5F5F7;
    --bg-secondary: #F5F5F7;
    --surface: #FFFFFF;
    --border: #E5E5EA;
    --border-light: #E5E5EA;
    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-muted: #8E8E93;

    /* ── Single accent: Orange ── */
    --primary: #F97216;
    --primary-light: #FFF7ED;
    --primary-dark: #EA580C;
    --primary-muted: #FDBA74;

    /* ── Semantic (tinted, not saturated) ── */
    --green: #34C759;
    --green-light: #EAF7EE;
    --green-dark: #1F7A3F;
    --amber: #FF9F0A;
    --amber-light: #FFF8EC;
    --amber-dark: #C67600;
    --red: #FF3B30;
    --red-light: #FFECEB;
    --red-dark: #C5221F;

    /* ── Legacy aliases (backward compat) ── */
    --yellow: var(--amber);
    --yellow-light: var(--amber-light);
    --yellow-dark: var(--amber-dark);
    --accent: var(--primary);

    /* ── Neutral palette (Apple SF) ── */
    --gray-1: #8E8E93;
    --gray-2: #AEAEB2;
    --gray-3: #C7C7CC;
    --gray-4: #D1D1D6;
    --gray-5: #E5E5EA;
    --gray-6: #F2F2F7;

    /* ── Layout ── */
    --sidebar-width: 72px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 2px 8px rgba(0,0,0,0.06);

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    background: #F5F5F7;
    min-height: 100vh;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Smooth Focus Rings ── */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
    outline-offset: 0;
}

/* ── Selection ── */
::selection {
    background: rgba(249, 114, 22, 0.15);
    color: inherit;
}

/* ── Notification Toast ── */
.save-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1D1D1F;
    color: #fff;
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    opacity: 0;
    transition: transform 0.3s var(--ease-spring), opacity 0.3s ease;
    pointer-events: none;
    max-width: 90vw;
    white-space: nowrap;
}
.save-notification.show,
.save-notification.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.save-notification.toast-warning {
    background: var(--amber-dark);
}
.save-notification.toast-error {
    background: var(--red-dark);
}
.save-notification.toast-success {
    background: #1D1D1F;
}
.save-notification.toast-info {
    background: #1D1D1F;
}

/* ── Skeleton Loading ── */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--gray-6) 25%, var(--gray-5) 50%, var(--gray-6) 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}