/*
Name: Warstwa ft-core: tokeny koloru
Slug: ft-core
Version: 1.0.1
Description: Tokeny koloru portalu w dwóch paletach (ciemna i jasna) oraz podpięcie palety Astry pod te same wartości.
Module: core
Scope: front
Load: manual
Media: all

1.0.1: zmienne pochodne Astry (ramki, tła pól) w jasnej palecie. Astra liczy je
       w :root ze swoich ciemnych kolorów, więc tabele miały prawie czarne ramki.
1.0.0: pierwsza wersja, kontrakt koloru v2.
*/

/* Jedno miejsce prawdy dla kolorów. Sekcje i wtyczki sięgają wyłącznie
   po --ft-* z jasną wartością zapasową. Paletę wybiera moduł core przez
   klasę na body: ft-paleta-ciemna albo ft-paleta-jasna. Bez klasy obowiązuje
   ciemna, czyli stan portalu sprzed zmiany. */
:root{
    --ft-core: 1;
    --ft-font-display: "Archivo", sans-serif;
    --ft-font-body: "Instrument Sans", sans-serif;
    --ft-bg: #0C0D10;
    --ft-bg-alt: #101216;
    --ft-surface: #16181D;
    --ft-surface-2: #1C1F26;
    --ft-surface-3: #20242C;
    --ft-chrome: #0C0D10;
    --ft-text: #F2F3F5;
    --ft-text-2: #9AA0AB;
    --ft-muted: #868C97;
    --ft-faint: #5F646E;
    --ft-accent: #C6F135;
    --ft-accent-hover: #D4F95C;
    --ft-accent-ink: #131503;
    --ft-accent-text: #C6F135;
    --ft-accent-line: #C6F135;
    --ft-accent-strong: #C6F135;
    --ft-accent-soft: rgba(198,241,53,0.10);
    --ft-focus: #C6F135;
    --ft-logo-ico: #C6F135;
    --ft-line: #262A33;
    --ft-line-2: #333945;
    --ft-line-ui: #666E7E;
    --ft-hover-tint: rgba(255,255,255,0.05);
    --ft-danger: #F87171;
    --ft-danger-strong: #EF4444;
    --ft-danger-soft: rgba(248,113,113,0.10);
    --ft-danger-line: #8A3A3A;
    --ft-warning: #FBBF24;
    --ft-warning-soft: #2B2113;
    --ft-warning-line: #4A3A1A;
    --ft-success: #22C55E;
    --ft-fb: #1877F2;
    --ft-fb-hover: #3A8BF5;
    --ft-fb-text: #4D8FF5;
    --ft-wa: #25D366;
    --ft-wa-text: #25D366;
    --ft-on-wa: #06130B;
    --ft-on-brand: #FFFFFF;
    --ft-tiktok-text: #38E0D0;
    --ft-scrim: rgba(6,7,9,0.55);
    --ft-scrim-strong: rgba(6,7,9,0.9);
    --ft-shadow-sm: rgba(0,0,0,0.25);
    --ft-shadow-md: rgba(0,0,0,0.5);
    --ft-shadow-lg: rgba(0,0,0,0.8);
    --ft-inv-bg: #16181D;
    --ft-inv-surface: #1C1F26;
    --ft-inv-text: #F2F3F5;
    --ft-inv-muted: #868C97;
    --ft-inv-line: #262A33;
    --ft-inv-accent: #C6F135;
    --ft-inv-fb: #4C8BF5;
    --ft-inv-tiktok: #38E0D0;
    --ft-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23868C97' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    --ft-ico-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23868C97' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    color-scheme: dark;
}

body.ft-paleta-jasna{
    --ft-bg: #F7F8F5;
    --ft-bg-alt: #FFFFFF;
    --ft-surface: #FFFFFF;
    --ft-surface-2: #F1F3EE;
    --ft-surface-3: #E8EBE4;
    --ft-chrome: #FFFFFF;
    --ft-text: #191D22;
    --ft-text-2: #474D55;
    --ft-muted: #626970;
    --ft-faint: #7D848A;
    --ft-accent: #C8F52B;
    --ft-accent-hover: #B5DE1F;
    --ft-accent-ink: #191D22;
    --ft-accent-text: #4E6A00;
    --ft-accent-line: #6A8700;
    --ft-accent-strong: #191D22;
    --ft-accent-soft: #EEF7D2;
    --ft-focus: #4E6A00;
    --ft-logo-ico: #A5D918;
    --ft-line: #E0E4DE;
    --ft-line-2: #CDD2CA;
    --ft-line-ui: #7E867C;
    --ft-hover-tint: rgba(25,29,34,0.04);
    --ft-danger: #B42318;
    --ft-danger-strong: #B42318;
    --ft-danger-soft: #FDECEA;
    --ft-danger-line: #EBA8A0;
    --ft-warning: #8A5A00;
    --ft-warning-soft: #FBF1DC;
    --ft-warning-line: #E8CF9C;
    --ft-success: #1F7A3D;
    --ft-fb: #1466D6;
    --ft-fb-hover: #1260C8;
    --ft-fb-text: #1466D6;
    --ft-wa: #25D366;
    --ft-wa-text: #127A3C;
    --ft-on-wa: #06130B;
    --ft-on-brand: #FFFFFF;
    --ft-tiktok-text: #0F7B73;
    --ft-scrim: rgba(25,29,34,0.42);
    --ft-scrim-strong: rgba(16,19,23,0.88);
    --ft-shadow-sm: rgba(25,29,34,0.06);
    --ft-shadow-md: rgba(25,29,34,0.10);
    --ft-shadow-lg: rgba(25,29,34,0.16);
    --ft-inv-bg: #191D22;
    --ft-inv-surface: #232830;
    --ft-inv-text: #F2F3F5;
    --ft-inv-muted: #A3A9B2;
    --ft-inv-line: #323840;
    --ft-inv-accent: #C8F52B;
    --ft-inv-fb: #5B9AF7;
    --ft-inv-tiktok: #38E0D0;
    --ft-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23626970' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    --ft-ico-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23626970' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    color-scheme: light;
}
/* Pasek przewijania i kontrolki przeglądarki rysuje element html. */
html:has(> body.ft-paleta-jasna){
    color-scheme: light;
}

/* Paleta Astry podąża za tokenami, więc treść spoza sekcji (wpisy, strony
   bez Section Managera, przyciski motywu) zmienia się razem z resztą. */
:root{
    --ast-global-color-0: var(--ft-accent);
    --ast-global-color-1: var(--ft-accent-hover);
    --ast-global-color-2: var(--ft-text);
    --ast-global-color-3: var(--ft-text);
    --ast-global-color-4: var(--ft-bg);
    --ast-global-color-5: var(--ft-muted);
    --ast-global-color-6: var(--ft-line);
    --ast-global-color-7: var(--ft-surface);
    --ast-global-color-8: var(--ft-surface-2);
}
body.ft-paleta-jasna{
    --ast-global-color-0: var(--ft-accent-text);
    --ast-global-color-1: var(--ft-text);
    --ast-global-color-2: var(--ft-text);
    --ast-global-color-3: var(--ft-text);
    --ast-global-color-4: var(--ft-bg);
    --ast-global-color-5: var(--ft-muted);
    --ast-global-color-6: var(--ft-line);
    --ast-global-color-7: var(--ft-surface);
    --ast-global-color-8: var(--ft-surface-2);
    /* Zmienne pochodne Astra wylicza w :root z własnych kolorów, więc nie
       podążają za klasą na body. Tu przestawiamy je jawnie. */
    --ast-border-color: var(--ft-line, #E0E4DE);
    --ast-global-color-primary: var(--ft-bg, #F7F8F5);
    --ast-global-color-secondary: var(--ft-surface, #FFFFFF);
    --ast-global-color-alternate-background: var(--ft-surface-2, #F1F3EE);
    --ast-global-color-subtle-background: var(--ft-surface-2, #F1F3EE);
}

/* Tło strony z tokenu, żeby przełączenie palety nie zależało od ustawienia
   tła w Customizerze. Selektor z klasą body wygrywa z regułą Astry bez !important. */
body.ft-paleta-ciemna,
body.ft-paleta-jasna{
    background-color: var(--ft-bg, #F7F8F5);
    color: var(--ft-text, #191D22);
}
body.ft-paleta-ciemna ::selection,
body.ft-paleta-jasna ::selection{
    background: var(--ft-accent, #C8F52B);
    color: var(--ft-accent-ink, #191D22);
}