/* ===================================================
   OPTICA UNYVISION - Design Tokens
   Fuente unica de verdad para colores, tipografia,
   espaciados, bordes y sombras de toda la aplicacion.
   =================================================== */

:root {
    /* --- Marca / paleta --- */
    --color-primary: #667eea;
    --color-primary-rgb: 102, 126, 234;
    --color-primary-dark: #5a6fd8;
    --color-primary-light: #818cf8;
    --color-primary-start: #667eea;
    --color-primary-end: #764ba2;
    --gradient-primary: linear-gradient(135deg, var(--color-primary-start) 0%, var(--color-primary-end) 100%);

    /* --- Acento semantico global --- */
    --accent-primary: var(--color-primary);
    --accent-primary-hover: var(--color-primary-dark);
    --accent-primary-active: color-mix(in srgb, var(--color-primary-dark) 84%, black);
    --accent-soft: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    --accent-soft-hover: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
    --accent-border: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
    --accent-focus: var(--color-focus-ring);
    --accent-text: var(--color-primary);
    --accent-text-hover: var(--color-primary-dark);
    --accent-text-contrast: #ffffff;
    --control-primary-bg: var(--accent-primary);
    --control-primary-hover: var(--accent-primary-hover);
    --control-primary-active: var(--accent-primary-active);
    --control-primary-text: var(--accent-text-contrast);
    --control-border: color-mix(in srgb, var(--accent-primary) 34%, var(--color-border));
    --control-hover-border: color-mix(in srgb, var(--accent-primary) 62%, var(--color-border));
    --control-bg: color-mix(in srgb, var(--accent-primary) 3%, var(--color-input-bg));
    --control-focus-border: var(--accent-primary);
    --control-focus-ring: var(--accent-focus);
    --grid-border: color-mix(in srgb, var(--accent-primary) 30%, var(--table-border));
    --grid-header-bg: color-mix(in srgb, var(--accent-primary) 8%, var(--table-header-bg));
    --grid-header-border: color-mix(in srgb, var(--accent-primary) 64%, var(--table-border));
    --grid-row-hover-bg: color-mix(in srgb, var(--accent-primary) 6%, var(--table-row-bg));
    --grid-row-selected-bg: color-mix(in srgb, var(--accent-primary) 12%, var(--table-row-bg));

    /* Puente con Bootstrap 5.1. */
    --bs-primary: var(--accent-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-link-color: var(--accent-text);
    --bs-link-hover-color: var(--accent-text-hover);
    --bs-focus-ring-color: var(--control-focus-ring);
    --bs-pagination-active-bg: var(--control-primary-bg);
    --bs-pagination-active-border-color: var(--control-primary-bg);
    --bs-form-check-bg: var(--control-primary-bg);

    --color-secondary: #6c757d;
    --color-secondary-dark: #5a6268;

    --color-success: #10b981;
    --color-success-dark: #059669;
    --color-warning: #f59e0b;
    --color-warning-dark: #d97706;
    --color-danger: #ef4444;
    --color-danger-dark: #dc2626;
    --color-info: #3b82f6;
    --color-info-dark: #2563eb;
    --color-success-contrast: #047857;
    --color-warning-contrast: #92400e;
    --color-danger-contrast: #b91c1c;
    --color-info-contrast: #1d4ed8;

    /* --- Superficies --- */
    --color-bg: #f0f2f8;
    --color-surface: #ffffff;
    --color-surface-hover: #fafbff;
    --color-border: #e2e8f0;
    --color-divider: #e8edf5;
    --color-input-bg: #ffffff;
    --color-input-disabled: #f8f9fa;
    --table-bg: #ffffff;
    --table-header-bg: #f4f6fb;
    --table-row-bg: #ffffff;
    --table-row-alt-bg: #fafbff;
    --table-row-hover-bg: var(--grid-row-hover-bg);
    --table-row-selected-bg: var(--grid-row-selected-bg);
    --table-text-primary: #25273a;
    --table-text-secondary: #697184;
    --table-text-muted: #8c95a8;
    --table-border: #e2e8f0;
    --table-divider: #e8edf5;
    --table-icon: #657086;
    --table-icon-hover: var(--color-primary-dark);
    --table-action-hover-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-table-striped: var(--table-row-alt-bg);
    --color-table-hover: var(--table-row-hover-bg);
    --color-overlay: rgba(15, 23, 42, 0.62);
    --color-focus-ring: color-mix(in srgb, var(--color-primary) 25%, transparent);

    /* --- Navegacion (hereda automaticamente claro, oscuro o sepia) --- */
    --nav-bg: var(--color-surface);
    --nav-border: var(--color-border);
    --nav-text: var(--color-text-secondary);
    --nav-text-muted: var(--color-text-muted);
    --nav-text-active: var(--accent-text);
    --nav-hover-bg: var(--color-surface-hover);
    --nav-active-bg: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface));
    --nav-active-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 18%, transparent);
    --nav-submenu-border: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
    --nav-backdrop: var(--color-overlay);

    /* --- Texto --- */
    --color-text-primary: #1a1a2e;
    --color-text-secondary: #6c757d;
    --color-text-muted: #9ca3af;
    --color-text-inverse: #ffffff;
    --color-placeholder: #8b93a7;

    /* --- Mensajes semánticos --- */
    --color-alert-success-bg: #f0fdf4;
    --color-alert-success-text: #065f46;
    --color-alert-danger-bg: #fef2f2;
    --color-alert-danger-text: #991b1b;
    --color-alert-warning-bg: #fffbeb;
    --color-alert-warning-text: #92400e;
    --color-alert-info-bg: #eff6ff;
    --color-alert-info-text: #1e40af;

    /* --- Alias retrocompatibles (usados por CSS/paginas existentes) --- */
    --primary-start: var(--color-primary-start);
    --primary-end: var(--color-primary-end);
    --primary-gradient: var(--gradient-primary);
    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --bg-body: var(--color-bg);
    --bg-card: var(--color-surface);
    --bg-card-hover: var(--color-surface-hover);
    --border-color: var(--color-border);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);

    /* --- Layout --- */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 76px;
    --topbar-height: 3.5rem;

    /* --- Bordes --- */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --border-radius-sm: var(--radius-sm);
    --border-radius: var(--radius);
    --border-radius-lg: var(--radius-lg);

    /* --- Sombras --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px color-mix(in srgb, var(--color-primary) 12%, transparent);
    --shadow-lg: 0 8px 32px color-mix(in srgb, var(--color-primary) 18%, transparent);

    /* --- Espaciado --- */
    --space-xs: 0.375rem;
    --space-sm: 0.625rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* --- Tipografia --- */
    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* --- Animacion --- */
    --transition: 0.2s ease;
    --transition-slow: 0.35s ease;
}

/* Paleta oscura aplicada globalmente mediante data-theme="dark". */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0f1120;
    --color-surface: #171932;
    --color-surface-hover: #1d2040;
    --color-border: #2a2d4a;
    --color-divider: #252844;
    --color-input-bg: #12152a;
    --color-input-disabled: #20233b;
    --table-bg: #15172d;
    --table-header-bg: #1e213e;
    --table-row-bg: #171932;
    --table-row-alt-bg: #1a1d38;
    --grid-row-hover-bg: color-mix(in srgb, var(--accent-primary) 10%, var(--table-row-bg));
    --grid-row-selected-bg: color-mix(in srgb, var(--accent-primary) 18%, var(--table-row-bg));
    --table-row-hover-bg: var(--grid-row-hover-bg);
    --table-row-selected-bg: var(--grid-row-selected-bg);
    --table-text-primary: #e9ebf5;
    --table-text-secondary: #b3b8cf;
    --table-text-muted: #8990ad;
    --table-border: #303451;
    --table-divider: #272b47;
    --table-icon: #adb5d0;
    --table-icon-hover: #ffffff;
    --table-action-hover-bg: rgba(255, 255, 255, 0.08);
    --color-table-striped: var(--table-row-alt-bg);
    --color-table-hover: var(--table-row-hover-bg);
    --color-overlay: rgba(3, 5, 15, 0.78);
    --color-focus-ring: color-mix(in srgb, var(--color-primary) 38%, transparent);
    --accent-text: color-mix(in srgb, var(--color-primary) 58%, white);
    --accent-text-hover: color-mix(in srgb, var(--color-primary) 42%, white);

    --color-text-primary: #f4f5fb;
    --color-text-secondary: #b3b6d1;
    --color-text-muted: #8385a8;
    --color-text-inverse: #ffffff;
    --color-placeholder: #777b9f;
    --color-success-contrast: #6ee7b7;
    --color-warning-contrast: #fcd34d;
    --color-danger-contrast: #fca5a5;
    --color-info-contrast: #93c5fd;

    --color-alert-success-bg: #102b25;
    --color-alert-success-text: #86efc2;
    --color-alert-danger-bg: #35171e;
    --color-alert-danger-text: #fca5a5;
    --color-alert-warning-bg: #322512;
    --color-alert-warning-text: #fcd88a;
    --color-alert-info-bg: #142742;
    --color-alert-info-text: #a8c7fa;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.34);
}

/* Oscuro equilibrado es la base y tambien el fallback de variantes desconocidas. */
:root[data-theme="dark"][data-dark-variant="graphite"] {
    --color-bg: #18181b;
    --color-surface: #202024;
    --color-surface-hover: #29292e;
    --color-border: #38383f;
    --color-divider: #303036;
    --color-input-bg: #1b1b1f;
    --color-input-disabled: #29292e;
    --table-bg: #202024;
    --table-header-bg: #29292e;
    --table-row-bg: #202024;
    --table-row-alt-bg: #242428;
    --table-border: #3a3a42;
    --table-divider: #303036;
    --table-text-primary: #ececef;
    --table-text-secondary: #b8b8c0;
    --table-text-muted: #8f8f99;
    --color-text-primary: #f0f0f2;
    --color-text-secondary: #b8b8c0;
    --color-text-muted: #8f8f99;
    --color-placeholder: #85858f;
}

:root[data-theme="dark"][data-dark-variant="midnight"] {
    --color-bg: #08111f;
    --color-surface: #0e1b2d;
    --color-surface-hover: #10263f;
    --color-border: #203954;
    --color-divider: #182f49;
    --color-input-bg: #0a1728;
    --color-input-disabled: #162840;
    --table-bg: #0e1b2d;
    --table-header-bg: #122842;
    --table-row-bg: #0e1b2d;
    --table-row-alt-bg: #102138;
    --table-border: #23415f;
    --table-divider: #19334f;
    --table-text-primary: #e7edf6;
    --table-text-secondary: #afbdd0;
    --table-text-muted: #7f91a9;
    --color-text-primary: #edf2f8;
    --color-text-secondary: #afbdd0;
    --color-text-muted: #7f91a9;
    --color-placeholder: #778aa3;
}

:root[data-theme="dark"][data-dark-variant="amoled"] {
    --color-bg: #000000;
    --color-surface: #080808;
    --color-surface-hover: #101010;
    --color-border: #242424;
    --color-divider: #1b1b1b;
    --color-input-bg: #050505;
    --color-input-disabled: #151515;
    --table-bg: #080808;
    --table-header-bg: #111111;
    --table-row-bg: #080808;
    --table-row-alt-bg: #0d0d0d;
    --table-border: #292929;
    --table-divider: #1d1d1d;
    --table-text-primary: #e7e7e7;
    --table-text-secondary: #b2b2b2;
    --table-text-muted: #858585;
    --color-text-primary: #ebebeb;
    --color-text-secondary: #b2b2b2;
    --color-text-muted: #858585;
    --color-placeholder: #7c7c7c;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.7);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.62);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"][data-dark-variant="warm"] {
    --color-bg: #171411;
    --color-surface: #211c17;
    --color-surface-hover: #2a221b;
    --color-border: #44372c;
    --color-divider: #382d24;
    --color-input-bg: #1b1713;
    --color-input-disabled: #302820;
    --table-bg: #211c17;
    --table-header-bg: #2c241d;
    --table-row-bg: #211c17;
    --table-row-alt-bg: #261f19;
    --table-border: #493a2e;
    --table-divider: #382d24;
    --table-text-primary: #eee7df;
    --table-text-secondary: #c1b3a5;
    --table-text-muted: #958575;
    --color-text-primary: #f1ebe4;
    --color-text-secondary: #c1b3a5;
    --color-text-muted: #958575;
    --color-placeholder: #8b7b6d;
}

:root[data-theme="dark"][data-dark-variant="petroleum"] {
    --color-bg: #071718;
    --color-surface: #0d2224;
    --color-surface-hover: #143033;
    --color-border: #254348;
    --color-divider: #1b363a;
    --color-input-bg: #0a1b1d;
    --color-input-disabled: #173034;
    --table-bg: #0d2224;
    --table-header-bg: #153034;
    --table-row-bg: #0d2224;
    --table-row-alt-bg: #11292c;
    --table-border: #294a4e;
    --table-divider: #1b393d;
    --table-text-primary: #e4eeee;
    --table-text-secondary: #abc2c3;
    --table-text-muted: #78999b;
    --color-text-primary: #eaf2f2;
    --color-text-secondary: #abc2c3;
    --color-text-muted: #78999b;
    --color-placeholder: #719092;
}

:root[data-theme="dark"][data-dark-variant="forest"] {
    --color-bg: #0b1510;
    --color-surface: #122019;
    --color-surface-hover: #1a2d23;
    --color-border: #2b4536;
    --color-divider: #21372b;
    --color-input-bg: #0e1a14;
    --color-input-disabled: #1d3025;
    --table-bg: #122019;
    --table-header-bg: #1b2e24;
    --table-row-bg: #122019;
    --table-row-alt-bg: #17271f;
    --table-border: #304a3b;
    --table-divider: #22392d;
    --table-text-primary: #e7eee9;
    --table-text-secondary: #b0c2b5;
    --table-text-muted: #7f9987;
    --color-text-primary: #edf2ee;
    --color-text-secondary: #b0c2b5;
    --color-text-muted: #7f9987;
    --color-placeholder: #789080;
}

:root[data-theme="dark"][data-dark-variant="nocturne"] {
    --color-bg: #12101c;
    --color-surface: #1a1728;
    --color-surface-hover: #27223a;
    --color-border: #3b3453;
    --color-divider: #302a45;
    --color-input-bg: #151221;
    --color-input-disabled: #29243b;
    --table-bg: #1a1728;
    --table-header-bg: #28233b;
    --table-row-bg: #1a1728;
    --table-row-alt-bg: #201c31;
    --table-border: #403858;
    --table-divider: #312b47;
    --table-text-primary: #ece9f3;
    --table-text-secondary: #bbb4cd;
    --table-text-muted: #8d84a5;
    --color-text-primary: #f0edf5;
    --color-text-secondary: #bbb4cd;
    --color-text-muted: #8d84a5;
    --color-placeholder: #857c9c;
}

:root[data-theme="dark"][data-dark-variant="charcoal"] {
    --color-bg: #101112;
    --color-surface: #191a1c;
    --color-surface-hover: #232528;
    --color-border: #36393d;
    --color-divider: #2c2e32;
    --color-input-bg: #141517;
    --color-input-disabled: #27292c;
    --table-bg: #191a1c;
    --table-header-bg: #242629;
    --table-row-bg: #191a1c;
    --table-row-alt-bg: #1e2022;
    --table-border: #3a3d41;
    --table-divider: #2d3033;
    --table-text-primary: #e9eaeb;
    --table-text-secondary: #b5b8bb;
    --table-text-muted: #898d91;
    --color-text-primary: #edeeee;
    --color-text-secondary: #b5b8bb;
    --color-text-muted: #898d91;
    --color-placeholder: #808488;
}

:root[data-theme="dark"][data-dark-variant="slate"] {
    --color-bg: #121820;
    --color-surface: #1a2330;
    --color-surface-hover: #253142;
    --color-border: #35445a;
    --color-divider: #2b384a;
    --color-input-bg: #151d27;
    --color-input-disabled: #283546;
    --table-bg: #1a2330;
    --table-header-bg: #263244;
    --table-row-bg: #1a2330;
    --table-row-alt-bg: #202a39;
    --table-border: #39495f;
    --table-divider: #2c3a4d;
    --table-text-primary: #e9edf2;
    --table-text-secondary: #b4bfcd;
    --table-text-muted: #8593a5;
    --color-text-primary: #eef1f5;
    --color-text-secondary: #b4bfcd;
    --color-text-muted: #8593a5;
    --color-placeholder: #7d8b9e;
}

:root[data-theme="sepia"] {
    color-scheme: light;
    --color-primary: #8a5a36;
    --color-primary-rgb: 138, 90, 54;
    --color-primary-dark: #70452a;
    --color-primary-light: #ad7951;
    --color-primary-start: #9a6842;
    --color-primary-end: #72503c;

    --color-bg: #f3eadb;
    --color-surface: #fffaf0;
    --color-surface-hover: #f8eedf;
    --color-border: #d8c7ad;
    --color-divider: #e5d7c3;
    --color-input-bg: #fffdf7;
    --color-input-disabled: #eee3d2;
    --table-bg: #fffaf0;
    --table-header-bg: #f2e6d4;
    --table-row-bg: #fffaf0;
    --table-row-alt-bg: #fbf3e6;
    --grid-row-hover-bg: color-mix(in srgb, var(--accent-primary) 7%, var(--table-row-bg));
    --grid-row-selected-bg: color-mix(in srgb, var(--accent-primary) 15%, var(--table-row-bg));
    --table-row-hover-bg: var(--grid-row-hover-bg);
    --table-row-selected-bg: var(--grid-row-selected-bg);
    --table-text-primary: #49372b;
    --table-text-secondary: #725f50;
    --table-text-muted: #927d6b;
    --table-border: #d8c7ad;
    --table-divider: #e5d7c3;
    --table-icon: #796553;
    --table-icon-hover: #633c24;
    --table-action-hover-bg: rgba(138, 90, 54, 0.11);
    --color-table-striped: var(--table-row-alt-bg);
    --color-table-hover: var(--table-row-hover-bg);
    --color-overlay: rgba(55, 40, 28, 0.62);
    --color-focus-ring: color-mix(in srgb, var(--color-primary) 28%, transparent);

    --color-text-primary: #3f3026;
    --color-text-secondary: #6f5b4c;
    --color-text-muted: #927d6b;
    --color-text-inverse: #fffaf0;
    --color-placeholder: #9a8573;
    --color-success-contrast: #3f6d43;
    --color-warning-contrast: #805d20;
    --color-danger-contrast: #93493f;
    --color-info-contrast: #45666b;

    --color-alert-success-bg: #eef3df;
    --color-alert-success-text: #365d39;
    --color-alert-danger-bg: #f8e5df;
    --color-alert-danger-text: #863f35;
    --color-alert-warning-bg: #f8edcf;
    --color-alert-warning-text: #76541d;
    --color-alert-info-bg: #e9eee8;
    --color-alert-info-text: #3d5d61;

    --shadow-sm: 0 1px 3px rgba(79, 55, 35, 0.1);
    --shadow-md: 0 4px 16px rgba(79, 55, 35, 0.13);
    --shadow-lg: 0 8px 32px rgba(79, 55, 35, 0.16);
}

/* Colores de acento. No modifican superficies ni colores semanticos de estado. */
:root[data-accent="sky"] {
    --color-primary: #0369a1;
    --color-primary-rgb: 3, 105, 161;
    --color-primary-dark: #075985;
    --color-primary-light: #38bdf8;
    --color-primary-start: #0284c7;
    --color-primary-end: #2563eb;
}

:root[data-accent="turquoise"] {
    --color-primary: #0f766e;
    --color-primary-rgb: 15, 118, 110;
    --color-primary-dark: #115e59;
    --color-primary-light: #2dd4bf;
    --color-primary-start: #0f8f87;
    --color-primary-end: #0e7490;
}

:root[data-accent="emerald"] {
    --color-primary: #047857;
    --color-primary-rgb: 4, 120, 87;
    --color-primary-dark: #065f46;
    --color-primary-light: #34d399;
    --color-primary-start: #059669;
    --color-primary-end: #047857;
}

:root[data-accent="green"] {
    --color-primary: #3f7d20;
    --color-primary-rgb: 63, 125, 32;
    --color-primary-dark: #2f6518;
    --color-primary-light: #84cc16;
    --color-primary-start: #4d8f27;
    --color-primary-end: #2f6b35;
}

:root[data-accent="violet"] {
    --color-primary: #6d4bc3;
    --color-primary-rgb: 109, 75, 195;
    --color-primary-dark: #5835a7;
    --color-primary-light: #a78bfa;
    --color-primary-start: #7650c7;
    --color-primary-end: #6d28d9;
}

:root[data-accent="lavender"] {
    --color-primary: #8064a9;
    --color-primary-rgb: 128, 100, 169;
    --color-primary-dark: #684b8e;
    --color-primary-light: #b49ad6;
    --color-primary-start: #8b6bb8;
    --color-primary-end: #7255a3;
}

:root[data-accent="orange"] {
    --color-primary: #c2510c;
    --color-primary-rgb: 194, 81, 12;
    --color-primary-dark: #9a3f08;
    --color-primary-light: #fb923c;
    --color-primary-start: #d56318;
    --color-primary-end: #b4420b;
}

:root[data-accent="amber"] {
    --color-primary: #a16207;
    --color-primary-rgb: 161, 98, 7;
    --color-primary-dark: #854d0e;
    --color-primary-light: #fbbf24;
    --color-primary-start: #b87508;
    --color-primary-end: #9a5710;
}

:root[data-accent="burgundy"] {
    --color-primary: #922746;
    --color-primary-rgb: 146, 39, 70;
    --color-primary-dark: #741d37;
    --color-primary-light: #d15a7c;
    --color-primary-start: #a83255;
    --color-primary-end: #7f2949;
}

:root[data-accent="pink"] {
    --color-primary: #be376f;
    --color-primary-rgb: 190, 55, 111;
    --color-primary-dark: #9d2859;
    --color-primary-light: #f472b6;
    --color-primary-start: #cf477f;
    --color-primary-end: #a52d78;
}

:root[data-accent="graphite"] {
    --color-primary: #526070;
    --color-primary-rgb: 82, 96, 112;
    --color-primary-dark: #384454;
    --color-primary-light: #94a3b8;
    --color-primary-start: #64748b;
    --color-primary-end: #475569;
}

/* En oscuro se suaviza el tono auxiliar; el color principal conserva contraste AA. */
:root[data-theme="dark"]:not([data-accent="blue"]) {
    --color-primary-light: color-mix(in srgb, var(--color-primary) 62%, white);
}

/* Sepia integra los acentos con tonos algo mas calidos y desaturados. */
:root[data-theme="sepia"][data-accent="sky"] { --color-primary: #3d718d; --color-primary-rgb: 61, 113, 141; --color-primary-dark: #315c74; --color-primary-start: #4b819a; --color-primary-end: #526f99; }
:root[data-theme="sepia"][data-accent="turquoise"] { --color-primary: #39766f; --color-primary-rgb: 57, 118, 111; --color-primary-dark: #2d5f59; --color-primary-start: #478780; --color-primary-end: #47757c; }
:root[data-theme="sepia"][data-accent="emerald"] { --color-primary: #40745d; --color-primary-rgb: 64, 116, 93; --color-primary-dark: #335e4a; --color-primary-start: #50846d; --color-primary-end: #47745b; }
:root[data-theme="sepia"][data-accent="green"] { --color-primary: #58752f; --color-primary-rgb: 88, 117, 47; --color-primary-dark: #465e26; --color-primary-start: #698440; --color-primary-end: #4d7041; }
:root[data-theme="sepia"][data-accent="violet"] { --color-primary: #725693; --color-primary-rgb: 114, 86, 147; --color-primary-dark: #5c4478; --color-primary-start: #8268a2; --color-primary-end: #704d91; }
:root[data-theme="sepia"][data-accent="lavender"] { --color-primary: #80668f; --color-primary-rgb: 128, 102, 143; --color-primary-dark: #684f75; --color-primary-start: #90769e; --color-primary-end: #755b88; }
:root[data-theme="sepia"][data-accent="orange"] { --color-primary: #a95828; --color-primary-rgb: 169, 88, 40; --color-primary-dark: #87451f; --color-primary-start: #b96a37; --color-primary-end: #984a25; }
:root[data-theme="sepia"][data-accent="amber"] { --color-primary: #91651b; --color-primary-rgb: 145, 101, 27; --color-primary-dark: #765116; --color-primary-start: #a4782c; --color-primary-end: #855a1c; }
:root[data-theme="sepia"][data-accent="burgundy"] { --color-primary: #843c50; --color-primary-rgb: 132, 60, 80; --color-primary-dark: #6b3041; --color-primary-start: #974d61; --color-primary-end: #753647; }
:root[data-theme="sepia"][data-accent="pink"] { --color-primary: #a64d70; --color-primary-rgb: 166, 77, 112; --color-primary-dark: #873c5a; --color-primary-start: #b95f81; --color-primary-end: #934365; }
:root[data-theme="sepia"][data-accent="graphite"] { --color-primary: #5f6467; --color-primary-rgb: 95, 100, 103; --color-primary-dark: #4a5054; --color-primary-start: #707577; --color-primary-end: #555d62; }