/* 
 * Coop Grafisk Profil - Färgschema
 * Baserat på Coops officiella grafiska manual
 */

:root {
    /* === PRIMÄRFÄRGER (Grönt tema) === */
    --coop-green-primary: #00aa46;     /* RGB 0,170,70 - Huvudgrön */
    --coop-green-dark: #005537;        /* RGB 0,85,55 - Mörkgrön */
    --coop-green-light: #aad23c;       /* RGB 170,210,60 - Ljusgrön */
    
    /* === BAKGRUNDSFÄRGER === */
    --coop-bg-white: #ffffff;       /* Standardbakgrund */
    --coop-bg-light-green: #edf0b9;    /* Ljusgrön bakgrund (DR) */
    --coop-bg-brown: #301301;   /* Brun (butiksfasader) */
    
    /* === DIGITALA TILLÄGGSFÄRGER === */
    --coop-digital-light-green: #e0f2d2;  /* Ljusgrön för digitalt */
    --coop-digital-light-yellow: #fffbdb; /* Ljusgul */
    --coop-digital-light-pink: #ffeaf3;   /* Ljusrosa */
    --coop-digital-red-warning: #ff6565;  /* Röd för varningar */
    
    /* === TEXT & NEUTRAL === */
  --coop-text-base: #333333;      /* Bastext */
    --coop-bg-light-gray: #ededed;     /* Ljus bakgrund 1 */
    --coop-bg-light-gray-2: #f5f5f5;   /* Ljus bakgrund 2 */
 
    /* === ACCENTFÄRGER (endast för priskommunikation) === */
    --coop-accent-pink: #dd93b3;       /* Rosa (pris) */
    --coop-accent-red: #ff3300;        /* Röd (pris) */
    --coop-accent-yellow: #fff000;     /* Gul (pris) */
    
    /* === FUNKTIONELLA FÄRGER === */
    --coop-success: var(--coop-green-primary);
    --coop-warning: var(--coop-accent-yellow);
    --coop-error: var(--coop-digital-red-warning);
    --coop-info: var(--coop-green-light);
}

/* === HJÄLPKLASSER === */

/* Bakgrunder */
.coop-bg-white { background-color: var(--coop-bg-white); }
.coop-bg-green { background-color: var(--coop-green-primary); }
.coop-bg-green-dark { background-color: var(--coop-green-dark); }
.coop-bg-green-light { background-color: var(--coop-bg-light-green); }
.coop-bg-digital-green { background-color: var(--coop-digital-light-green); }

/* Text färger */
.coop-text-green { color: var(--coop-green-primary); }
.coop-text-green-dark { color: var(--coop-green-dark); }
.coop-text-base { color: var(--coop-text-base); }
.coop-text-white { color: var(--coop-bg-white); }

/* Borders */
.coop-border-green { border-color: var(--coop-green-primary); }
.coop-border-green-dark { border-color: var(--coop-green-dark); }
.coop-border-green-light { border-color: var(--coop-green-light); }

/* Buttons (Coop-stil) */
.coop-btn-primary {
    background: linear-gradient(135deg, var(--coop-green-primary) 0%, var(--coop-green-dark) 100%);
    color: var(--coop-bg-white);
    border: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.coop-btn-primary:hover {
  background: linear-gradient(135deg, var(--coop-green-dark) 0%, var(--coop-green-primary) 100%);
    box-shadow: 0 4px 12px rgba(0, 170, 70, 0.3);
}

.coop-btn-primary:disabled {
    background: var(--coop-bg-light-gray);
    color: #999;
    cursor: not-allowed;
}

/* Cards med Coop-stil */
.coop-card {
    background: var(--coop-bg-white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 85, 55, 0.1);
    transition: all 0.3s ease;
}

.coop-card:hover {
    box-shadow: 0 4px 16px rgba(0, 170, 70, 0.2);
    transform: translateY(-2px);
}

/* Success panel (Coop grön) */
.coop-success-panel {
    background: var(--coop-digital-light-green);
    border-left: 4px solid var(--coop-green-primary);
    border-radius: 4px;
    padding: 1.5rem;
    color: var(--coop-green-dark);
}

/* Warning panel (Coop varning) */
.coop-warning-panel {
    background: var(--coop-digital-light-yellow);
    border-left: 4px solid var(--coop-accent-yellow);
    border-radius: 4px;
    padding: 1.5rem;
    color: var(--coop-text-base);
}

/* Error panel (Coop fel) */
.coop-error-panel {
    background: var(--coop-digital-light-pink);
    border-left: 4px solid var(--coop-digital-red-warning);
    border-radius: 4px;
    padding: 1.5rem;
    color: var(--coop-text-base);
}

/* Info panel (Coop info) */
.coop-info-panel {
    background: var(--coop-bg-light-green);
    border-left: 4px solid var(--coop-green-light);
    border-radius: 4px;
    padding: 1.5rem;
    color: var(--coop-green-dark);
}

/* Headers med Coop-grönt */
.coop-header {
 background: linear-gradient(135deg, var(--coop-green-primary) 0%, var(--coop-green-dark) 100%);
    color: var(--coop-bg-white);
    padding: 2rem;
    border-radius: 8px 8px 0 0;
}

/* Input fields med Coop-stil */
.coop-input {
    border: 2px solid var(--coop-bg-light-gray);
    border-radius: 4px;
    padding: 0.75rem;
 transition: all 0.2s ease;
}

.coop-input:focus {
    outline: none;
    border-color: var(--coop-green-primary);
    box-shadow: 0 0 0 3px rgba(0, 170, 70, 0.1);
}

/* Status badges med Coop-färger */
.coop-badge-success {
    background: var(--coop-green-primary);
    color: var(--coop-bg-white);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.coop-badge-warning {
    background: var(--coop-accent-yellow);
    color: var(--coop-text-base);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.coop-badge-error {
    background: var(--coop-digital-red-warning);
    color: var(--coop-bg-white);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Gradients (endast för headers/knappar) */
.coop-gradient-primary {
    background: linear-gradient(135deg, var(--coop-green-primary) 0%, var(--coop-green-dark) 100%);
}

.coop-gradient-light {
    background: linear-gradient(135deg, var(--coop-green-light) 0%, var(--coop-green-primary) 100%);
}