/* ========================================
   THEME.CSS - PALETA COMPLETĂ DE CULORI
   Toate culorile Pantone 2000-2026
   ======================================== */

:root {
    /* ===== CULORILE DE BAZĂ (toate disponibile) ===== */
    --cloud-dancer: #F0EEE9;        /* 2026 */
    --mocha-mousse: #A57865;         /* 2025 */
    --peach-fuzz: #FFBE98;            /* 2024 */
    --viva-magenta: #BB2649;          /* 2023 */
    --very-peri: #6667AB;             /* 2022 */
    --ultimate-gray: #939597;         /* 2021 */
    --illuminating: #F5DF4D;          /* 2021 */
    --classic-blue: #0F4C81;          /* 2020 */
    --living-coral: #FF6F61;           /* 2019 */
    --ultra-violet: #5F4B8B;          /* 2018 */
    --greenery: #88B04B;              /* 2017 */
    --rose-quartz: #F7CACA;           /* 2016 */
    --serenity: #93A9D1;              /* 2016 */
    --marsala: #964F4C;               /* 2015 */
    --radiant-orchid: #AD5E99;        /* 2014 */
    --emerald: #009473;               /* 2013 */
    --tangerine-tango: #DD4124;       /* 2012 */
    --honeysuckle: #D94F70;           /* 2011 */
    --turquoise: #45B5AA;             /* 2010 */
    --mimosa: #F0C05A;                /* 2009 */
    --blue-iris: #5A5B9F;             /* 2008 */
    --chili-pepper: #9B1B30;          /* 2007 */
    --sand-dollar: #DECDBE;           /* 2006 */
    --blue-turquoise: #53B0AE;        /* 2005 */
    --tigerlily: #E2583E;             /* 2004 */
    --aqua-sky: #7BC4C4;              /* 2003 */
    --true-red: #BF1932;              /* 2002 */
    --fuchsia-rose: #C74375;          /* 2001 */
    --cerulean: #9BB7D4;              /* 2000 */

    /* ===== VARIABILE FUNCTIONALE =====
       Aici alegem CE CULORI folosim efectiv */

    /* Dark theme (default) */
    --bg-dark: #1a1a1a;
    --bg-card-dark: #2d2d2d;
    --text-dark: var(--cloud-dancer);
    --text-muted-dark: #b0b3b8;
    --border-dark: #404040;

    /* Light theme */
    --bg-light: var(--cloud-dancer);
    --bg-card-light: #ffffff;
    --text-light: #1c1e21;
    --text-muted-light: #65676b;
    --border-light: #ddd;

    /* ===== CULORILE DE ACCENT ===== */
    --accent-primary: var(--peach-fuzz);        /* Butoane principale - 2024 */
    --accent-secondary: var(--mocha-mousse);    /* Hover, elemente secundare - 2025 */
    --accent-success: var(--greenery);          /* Succes, Salvează - 2017 */
    --accent-danger: var(--viva-magenta);       /* Pericol, Șterge - 2023 */
    --accent-warning: var(--living-coral);      /* Avertizare - 2019 */
    --accent-info: var(--very-peri);            /* Link-uri, info - 2022 */
    --accent-special: var(--radiant-orchid);    /* Elemente speciale - 2014 */
    --accent-glow: rgba(102, 103, 171, 0.3);    /* Very Peri cu transparență */

    /* ===== DIMENSIUNI ===== */
    --border-radius: 12px;
    --border-radius-sm: 6px;
    --spacing: 20px;
}

/* Dark theme (default) */
body {
    --bg: var(--bg-dark);
    --bg-card: var(--bg-card-dark);
    --text: var(--text-dark);
    --text-muted: var(--text-muted-dark);
    --border: var(--border-dark);
    --header-bg: #000000;
    --button-primary: var(--accent-success);
    --button-danger: var(--accent-danger);

    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

/* Light theme */
body.light-theme {
    --bg: var(--bg-light);
    --bg-card: var(--bg-card-light);
    --text: var(--text-light);
    --text-muted: var(--text-muted-light);
    --border: var(--border-light);
    --header-bg: #333333;
    --button-primary: var(--accent-success);
    --button-danger: var(--accent-danger);
}

/* ===== ELEMENTE DE DESIGN ===== */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
}

a {
    color: var(--accent-info);
    text-decoration: none;
}

a:hover {
    color: var(--accent-secondary);
}

button {
    background: var(--button-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

button:hover {
    background: var(--accent-secondary);
}

.btn-success {
    background: var(--accent-success);
}

.btn-danger {
    background: var(--accent-danger);
}

.btn-warning {
    background: var(--accent-warning);
}

/* ===== HEADER ===== */
.header {
    background: var(--header-bg);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    color: white;
}

.logout {
    background: var(--button-danger);
}

.logout:hover {
    background: var(--accent-danger);
}

/* ===== CONTAINER ===== */
.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

/* ===== CARDURI ===== */
.form-box, .content-list, .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 25px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.form-box h2, .content-list h2 {
    margin-bottom: 20px;
    color: var(--text);
    font-size: 20px;
}

/* ===== INPUT ===== */
input, textarea {
    width: 100%;
    padding: 12px;
    margin: 8px 0 20px 0;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* ===== CONTENT ITEM ===== */
.content-item {
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 15px;
    border-radius: var(--border-radius-sm);
}

.content-item h3 {
    margin-bottom: 10px;
    color: var(--accent-primary);
}

.content-item small {
    color: var(--text-muted);
    display: block;
}

.edit-btn {
    background: var(--accent-info);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 12px;
}

.edit-btn:hover {
    background: var(--accent-secondary);
}

.delete-btn {
    background: var(--button-danger);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 12px;
}

.delete-btn:hover {
    background: var(--accent-danger);
}

/* ===== FOOTER ===== */
.footer {
    margin-top: 60px;
    padding: 40px 0;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.theme-toggle:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}