/* ========== CORALROSE DESIGN SYSTEM ========== */

/* ========== CSS VARIABLES ========== */
:root {
    /* ========== GRAYSCALE PALETTE ========== */
    --incubation-gray-100: #333333;  /* Darkest - primary text */
    --incubation-gray-200: #4F4F4F;  /* Secondary text */
    --incubation-gray-300: #828282;  /* Tertiary text */
    --incubation-gray-400: #BDBDBD;  /* Light borders, hints */
    --incubation-gray-500: #E0E0E0;  /* Very light backgrounds */
    --incubation-gray-600: #F2F2F2;  /* Lightest backgrounds */

    /* ========== PRIMARY COLOR - Muted Coral Rose ========== */
    --warm-primary: #d9836e;         /* Main brand color */
    --warm-primary-hover: #c4746e;   /* Darker for hover states */
    --warm-primary-light: #e6a89d;   /* Lighter for subtle accents */

    /* ========== SECONDARY COLOR - Muted Sage Green ========== */
    --warm-secondary: #8a9a7b;       /* Earthy complement */
    --warm-secondary-light: #a8b89a; /* Lighter green accent */

    /* ========== TERTIARY COLOR - Warm Taupe ========== */
    --warm-tertiary: #d4b8a8;        /* Supports primary and secondary */

    /* ========== BACKGROUNDS ========== */
    --warm-cream: #faf8f6;           /* Very light warm cream */
    --warm-bg: #f5ece6;              /* Soft warm beige */

    /* ========== STATUS COLORS - Distinct & Clear ========== */
    --status-success: #6ba876;       /* Muted forest green */
    --status-warning: #e8b84a;       /* Warm gold/amber */
    --status-error: #d9534f;         /* Clear red */
    --status-info: #5b8fc9;          /* Muted blue */

    /* ========== ALERT BACKGROUNDS & TEXT - Light Mode ========== */
    --alert-success-bg: rgba(107, 168, 118, 0.15);
    --alert-success-text: #2d5f1f;
    --alert-warning-bg: rgba(232, 184, 74, 0.15);
    --alert-warning-text: #6b4b0a;
    --alert-error-bg: rgba(217, 83, 79, 0.15);
    --alert-error-text: #5a1f1f;
    --alert-info-bg: rgba(91, 143, 201, 0.15);
    --alert-info-text: #1f3a52;

    /* ========== SEMANTIC ALIASES ========== */
    --color-primary: var(--warm-primary);
    --color-primary-hover: var(--warm-primary-hover);
    --color-primary-light: var(--warm-primary-light);
    --color-secondary: var(--warm-secondary);
    --color-secondary-light: var(--warm-secondary-light);
    --color-accent: var(--warm-tertiary);
    --color-success: var(--status-success);
    --color-warning: var(--status-warning);
    --color-error: var(--status-error);
    --color-info: var(--status-info);
    --color-text-primary: var(--incubation-gray-100);
    --color-text-secondary: var(--incubation-gray-200);
    --color-bg-primary: white;
    --color-bg-secondary: var(--warm-cream);

    /* ========== SEMANTIC UI LAYER ========== */
    /* Table colors - handle grayscale inversion */
    --ui-table-header-bg: var(--incubation-gray-500);
    --ui-table-row-bg: transparent;  /* Uses page background */
    --ui-table-row-hover-bg: var(--incubation-gray-600);
}

/* ========== DARK MODE ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --incubation-gray-100: #f0f0f0;
        --incubation-gray-200: #d0d0d0;
        --incubation-gray-300: #a0a0a0;
        --incubation-gray-400: #707070;
        --incubation-gray-500: #505050;
        --incubation-gray-600: #2a2a2a;

        --warm-primary: #e6a89d;
        --warm-primary-hover: #d9836e;
        --warm-primary-light: #c4746e;
        --warm-secondary: #a8b89a;
        --warm-cream: #222222;
        --warm-bg: #2d2d2d;

        --color-text-primary: #f0f0f0;
        --color-text-secondary: #d0d0d0;
        --color-bg-primary: #1a1a1a;
        --color-bg-secondary: #2a2a2a;

        /* Semantic UI - swap for dark mode visual hierarchy */
        --ui-table-header-bg: var(--incubation-gray-600);
        --ui-table-row-hover-bg: var(--incubation-gray-500);

        /* ========== ALERT BACKGROUNDS & TEXT - Dark Mode ========== */
        --alert-success-bg: rgba(107, 168, 118, 0.2);
        --alert-success-text: #a8d4a8;
        --alert-warning-bg: rgba(232, 184, 74, 0.2);
        --alert-warning-text: #f0d480;
        --alert-error-bg: rgba(217, 83, 79, 0.2);
        --alert-error-text: #ff9999;
        --alert-info-bg: rgba(91, 143, 201, 0.2);
        --alert-info-text: #e8f0ff;
    }
}

/* ========== BASE TYPOGRAPHY ========== */
body {
    font-family: "Crimson Text", serif;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
}

/* ========== LINKS ========== */
a {
    color: blue;
    text-decoration: underline;
    transition: color 0.2s ease;
}

a:visited {
    color: purple;
}

a:hover {
    opacity: 0.8;
}

/* ========== BUTTONS ========== */
button,
.button {
    padding: 10px 20px;
    border: 1px solid var(--incubation-gray-400);
    background-color: var(--incubation-gray-500);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

button:hover,
.button:hover {
    background-color: var(--incubation-gray-400);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-bg-primary);
}

.btn-secondary:hover {
    opacity: 0.9;
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.btn-accent:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-bg-secondary);
}

/* ========== STATUS BADGES ========== */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.badge-success {
    background-color: var(--status-success);
    color: white;
}

.badge-warning {
    background-color: var(--status-warning);
    color: white;
}

.badge-error {
    background-color: var(--status-error);
    color: white;
}

.badge-info {
    background-color: var(--status-info);
    color: white;
}

/* ========== CARDS ========== */
.card {
    background: var(--color-bg-primary);
    border: 1px solid var(--incubation-gray-400);
    padding: 10px 15px;
}

.card-warm {
    background: var(--warm-bg);
    border-color: var(--warm-primary-light);
}

.card-header {
    background: linear-gradient(135deg, var(--warm-primary) 0%, var(--warm-primary-hover) 100%);
    color: white;
    padding: 15px 20px;
    font-weight: 600;
    margin: -20px -20px 15px -20px;
}

.card-content {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ========== TABLES ========== */
table {
    width: 100%;
    border-collapse: collapse;
}

table thead {
    background-color: var(--incubation-gray-500);
    color: var(--incubation-gray-100);
}

table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
}

table td {
    padding: 12px;
    border-bottom: 1px solid var(--incubation-gray-500);
    color: var(--color-text-primary);
}

table thead tr:hover {
    background-color: var(--incubation-gray-500);
}

table tbody tr:hover {
    background-color: var(--incubation-gray-600);
}

table tbody tr:nth-child(even) {
    background-color: var(--incubation-gray-600);
}

@media (prefers-color-scheme: dark) {
    table tbody tr:nth-child(even) {
        background-color: var(--incubation-gray-500);
    }

    table td {
        border-bottom-color: var(--incubation-gray-500);
    }
}

/* ========== ALERTS ========== */
.alert {
    padding: 15px 20px;
    border-left: 4px solid;
    margin-bottom: 15px;
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-left-color: var(--status-success);
    color: var(--alert-success-text);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-left-color: var(--status-warning);
    color: var(--alert-warning-text);
}

.alert-error {
    background-color: var(--alert-error-bg);
    border-left-color: var(--status-error);
    color: var(--alert-error-text);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-left-color: var(--status-info);
    color: var(--alert-info-text);
}

/* ========== FORM ELEMENTS ========== */
.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-primary);
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--incubation-gray-400);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

@media (prefers-color-scheme: dark) {
    .form-group input,
    .form-group textarea,
    .form-group select {
        background-color: var(--incubation-gray-600);
        border-color: var(--incubation-gray-400);
    }
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--warm-secondary);
}

/* ========== MESSAGES ========== */
.messages {
    margin: 1rem 0;
    padding: 1rem;
}

.message.success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-left: 4px solid var(--status-success);
}

.message.error {
    background-color: var(--alert-error-bg);
    color: var(--alert-error-text);
    border-left: 4px solid var(--status-error);
}

.message.warning {
    background-color: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-left: 4px solid var(--status-warning);
}

.message.info {
    background-color: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-left: 4px solid var(--status-info);
}