/* Premium Design System */
:root {
    /* Color Palette */
    --primary: #ff8c69;
    --primary-hover: #ff7350;
    --primary-soft: rgba(255, 140, 105, 0.14);
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #9ca3af;
    --bg-page: #f8fafc;
    --bg-subtle: #f9fafb;
    --bg-card: #ffffff;
    --border-color: #e5e7eb;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    --card-hover-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);

    /* Primary Shadows (for buttons, interactive elements) */
    --shadow-primary-sm: 0 2px 8px rgba(255, 140, 105, 0.2);
    --shadow-primary-md: 0 4px 12px rgba(255, 140, 105, 0.25);
    --shadow-primary-lg: 0 6px 16px rgba(255, 140, 105, 0.35);

    /* Warning / Amber (for pending status, alerts) */
    --warning-bg: #fef3c7;
    --warning-border: #f59e0b;
    --warning-text: #92400e;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 99px;
}

/* Global Reset & Base Styles */
html, body {
    height: auto;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Common Components */

/* Premium Card */
.card-premium {
    background: var(--bg-card);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}

.card-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-hover-shadow);
}

/* Premium Buttons */
.btn-pill {
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-pill {
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(255, 140, 105, 0.25);
}

.btn-primary-pill:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 140, 105, 0.35);
    color: #fff;
}

/* Premium Inputs */
.input-premium {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.input-premium:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255, 140, 105, 0.1);
    outline: none;
}