/* /board.fabri.cc/css/boardStyles.css */

/* =========================================================
   THEME TOKENS
   ========================================================= */

:root,
html[data-theme="light"] {
    color-scheme: light;

    --themeHeaders: "Roboto Slab", serif;
    --themeBody: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    --themeH2: "Roboto Slab", serif;
    --themeFontFam: "Roboto Slab", serif;
    
    --lynx-page-bg: #edf2f1;
    --bg-overlay: rgba(177, 177, 227, 0.55) !important;

    --lynx-surface: rgba(255, 255, 255, .86);
    --lynx-surface-strong: #ffffff;
    --lynx-surface-soft: rgba(255, 255, 255, .62);
    --lynx-surface-muted: #eef4f3;

    --lynx-text: #172426;
    --lynx-text-soft: #556668;
    --lynx-text-muted: #7b898b;

    --lynx-accent: #3e8993;
    --lynx-accent-strong: #1d6f7a;
    --lynx-accent-soft: #dceced;

    --lynx-border: rgba(31, 72, 76, .14);
    --lynx-border-strong: rgba(31, 72, 76, .24);

    --lynx-danger: #984b4b;
    --lynx-danger-soft: #f7e8e7;

    --lynx-shadow:
        0 18px 45px rgba(36, 58, 60, .14);

    --lynx-shadow-soft:
        0 7px 22px rgba(36, 58, 60, .08);

    --lynx-input-bg: rgba(255, 255, 255, .96);
    --lynx-button-bg: #edf4f3;
    --lynx-button-text: #315e64;

    --lynx-primary-bg: #172426;
    --lynx-primary-text: #ffffff;

    --lynx-focus:
        0 0 0 3px rgba(62, 137, 147, .22);
        
    --themeClckBg:#fff;
    --themeClckClr:#000;
    --themeClckBg-hover:#fff;
    --themeClckClr-hover:#000;
    
    --modalOpenHL: #dee9e3;
    --viewsHoldBg: #e8f2f6c2;
    
    --localBdropBg: url('https://board.fabri.cc/images/blackboard-bg.jpg');
}

html[data-theme="dark"] {
    color-scheme: dark;
    
    --lynx-page-bg: #111719;
    --bg-overlay: rgba(8, 14, 16, .66);

    --lynx-surface: rgba(25, 33, 36, .91);
    --lynx-surface-strong: #1e282b;
    --lynx-surface-soft: rgba(35, 46, 49, .84);
    --lynx-surface-muted: #253033;

    --lynx-text: #f2f5f4;
    --lynx-text-soft: #b8c5c6;
    --lynx-text-muted: #88999b;

    --lynx-accent: #80c4cc;
    --lynx-accent-strong: #a4dde3;
    --lynx-accent-soft: rgba(91, 170, 181, .18);

    --lynx-border: rgba(220, 239, 240, .12);
    --lynx-border-strong: rgba(220, 239, 240, .23);

    --lynx-danger: #f0a4a0;
    --lynx-danger-soft: rgba(157, 70, 67, .22);

    --lynx-shadow:
        0 20px 55px rgba(0, 0, 0, .42);

    --lynx-shadow-soft:
        0 8px 28px rgba(0, 0, 0, .25);

    --lynx-input-bg: rgba(10, 16, 18, .72);
    --lynx-button-bg: #2a373a;
    --lynx-button-text: #dce8e8;

    --lynx-primary-bg: #eef5f4;
    --lynx-primary-text: #152022;

    --lynx-focus:
        0 0 0 3px rgba(128, 196, 204, .25);
        
    --themeClckBg:#fff;
    --themeClckClr:#000;
    --themeClckBg-hover:#fff;
    --themeClckClr-hover:#000;
    --modalOpenHL: #dee9e3;
    --viewsHoldBg: #e8f2f6c2;
}

html[data-theme="classic"] {
    color-scheme: light;

    --lynx-page-bg: #dfeceb;
    --bg-overlay: rgba(226, 239, 235, .48);

    --lynx-surface: rgba(249, 250, 239, .91);
    --lynx-surface-strong: #fbf8e8;
    --lynx-surface-soft: rgba(246, 241, 216, .78);
    --lynx-surface-muted: #e7ead2;

    --lynx-text: #39494a;
    --lynx-text-soft: #637071;
    --lynx-text-muted: #7d8986;

    --lynx-accent: #438f98;
    --lynx-accent-strong: #1f7384;
    --lynx-accent-soft: #d6e8e1;

    --lynx-border: rgba(67, 117, 114, .22);
    --lynx-border-strong: rgba(67, 117, 114, .38);

    --lynx-danger: #973f36;
    --lynx-danger-soft: #f3ded4;

    --lynx-shadow:
        9px 11px 0 rgba(63, 96, 91, .13);

    --lynx-shadow-soft:
        4px 5px 0 rgba(63, 96, 91, .10);

    --lynx-input-bg: #f9f7e9;
    --lynx-button-bg: #dce8df;
    --lynx-button-text: #365c5f;

    --lynx-primary-bg: #4e8e93;
    --lynx-primary-text: #fffdf0;

    --lynx-focus:
        0 0 0 3px rgba(67, 143, 152, .25);
        
    --themeClckBg:#fff;
    --themeClckClr:#000;
    --themeClckBg-hover:#fff;
    --themeClckClr-hover:#000;
    --modalOpenHL: #dee9e3;
    --topMenuInt: rgb(244, 245, 242);
    --viewsHoldBg: #e8f2f6c2;
}