/* ---------------------------------------------------------------
   Theme CSS
   CSS variables for light and dark modes
   --------------------------------------------------------------- */

/* ---------------------------
   Light theme
   --------------------------- */
:root {
    /* Backgrounds */
    --bg: #f8f9fb;
    --bg-soft: #eceff3;
    --bg-strong: #dbe1e8;

    /* Text */
    --text: #1c1f26;
    --text-soft: #4a4f57;
    --text-subtle: #6c717a;

    /* Accent (LPHYS'26 style warm red) */
    --accent: #d64032;
    --accent-text: #ffffff;

    /* Borders and lines */
    --line: rgba(0, 0, 0, 0.15);

    /* Cards / panels */
    --surface: #ffffff;
    --surface-soft: #f2f4f7;
}

/* ---------------------------
   Dark theme
   --------------------------- */
[data-theme="dark"] {
    /* Backgrounds */
    --bg: #0f1a24;
    --bg-soft: #15222f;
    --bg-strong: #1e2d3a;

    /* Text */
    --text: #dbe8f0;
    --text-soft: #a8b4bf;
    --text-subtle: #7a8691;

    /* Accent stays the same */
    --accent: #d64032;
    --accent-text: #ffffff;

    /* Borders and lines */
    --line: rgba(255, 255, 255, 0.15);

    /* Cards / panels */
    --surface: #16232f;
    --surface-soft: #1c2b38;
}

:root, :root[data-theme="dark"] {
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}