/**
 * AgileCanvas Design System - Shared Styles
 * 
 * Prinzipien:
 * - Keine Icons
 * - Minimale Linien
 * - Farbbalken als Haupt-Design-Element
 * - 4 Hauptfarben
 * - Klare Typografie
 */

/* === DESIGN TOKENS === */
:root {
    --energy: #78d678;
    --info: #6ba1f3;
    --action: #f5a65a;
    --neutral: #a7abb3;
    --border: #d0d7de;
    --bg-subtle: #f6f8fa;
    --text-primary: #1a1a1a;
    --text-secondary: #666;
    --text-meta: #888;
}

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

/* === TYPOGRAPHY === */
body { 
    font-family: 'IBM Plex Sans', sans-serif; 
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background: #fff;
}

.brand {
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-meta);
}

.headline {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.meta {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
}

.tiny {
    font-size: 9px;
    font-weight: 400;
}

/* === FARBBALKEN (Haupt-Design-Element!) === */
.bar-left {
    border-left: 4px solid var(--energy);
    padding-left: 15px;
}

.bar-left.info { border-left-color: var(--info); }
.bar-left.action { border-left-color: var(--action); }
.bar-left.neutral { border-left-color: var(--neutral); }

/* === KARTEN === */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px;
}

.card-accent {
    border-top: 4px solid var(--info);
}

/* === BADGES === */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.badge-energy { background: #d4edda; color: #155724; }
.badge-action { background: #fff3cd; color: #856404; }
.badge-neutral { background: var(--bg-subtle); color: #6c757d; }

/* === LINKS === */
a {
    color: var(--info);
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
}

/* === BUTTONS === */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary { 
    background: var(--action); 
    color: #fff; 
}

.btn-primary:hover {
    background: #e89b4a;
    text-decoration: none;
}

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

.btn-secondary:hover {
    background: #e9ecef;
    text-decoration: none;
}

/* === GRID === */
.grid-cell {
    padding: 12px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}

.grid-head {
    background: var(--bg-subtle);
    font-weight: 600;
    text-align: center;
}

/* === SPACING === */
.space-xs { margin-bottom: 4px; }
.space-s { margin-bottom: 8px; }
.space-m { margin-bottom: 12px; }
.space-l { margin-bottom: 20px; }
.space-xl { margin-bottom: 40px; }

/* === UTILITIES === */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-secondary); }
.text-meta { color: var(--text-meta); }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    body { padding: 15px; }
    .headline { font-size: 14px; }
}