/*
 * Tokeny design systemu dla aplikacji PHP Zaimplantowani.
 *
 * Źródło prawdy: docs/06_Design_System.md i apps/frontend/src/app/globals.css
 * (Tailwind theme). Tokeny tu są skopiowane ręcznie — przy zmianie palety
 * w MPM trzeba zsynchronizować ten plik (komentarz w nim na ten temat).
 *
 * Konwencja: zmienne CSS na poziomie :root, tryb ciemny przez klasę
 * html.dark (przełącznik JS + localStorage 'theme'), spójnie z next-themes
 * w MPM. Wybór motywu jest współdzielony między PHP a MPM (ten sam origin).
 */

/* Inter (hostowany lokalnie, wariant zmienny) — typografia spójna z MPM (next/font Inter).
   Podzbiory latin + latin-ext (polskie znaki). Zgodne z CSP: font-src 'self'. */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light;

    /* ── Tła ─────────────────────────────────────────────────── */
    --bg-page:        #FAF5F2;
    --bg-surface:     #FEF9F7;
    --bg-card:        #FFFFFF;
    --bg-muted:       #F5EEE9;

    /* ── Akcent koral ────────────────────────────────────────── */
    --coral:          #C85A3E;
    --coral-hover:    #B04E35;
    --coral-dim:      rgba(200, 90, 62, 0.08);
    --coral-border:   #EDD5C8;
    --coral-fg:       #FFFFFF;

    /* ── UwB granat ──────────────────────────────────────────── */
    --uwb-blue:        #1B4F9B;
    --uwb-blue-dim:    rgba(27, 79, 155, 0.07);
    --uwb-blue-border: rgba(27, 79, 155, 0.22);

    /* ── Status ──────────────────────────────────────────────── */
    --teal:           #1A7A6E;
    --teal-dim:       rgba(26, 122, 110, 0.08);
    --danger:         #C8311E;
    --danger-dim:     rgba(200, 49, 30, 0.08);

    /* ── Tekst ───────────────────────────────────────────────── */
    --text-heading:   #1A0A06;
    --text-body:      #2C1A12;
    --text-secondary: #6B4A3A;
    --text-muted:     #A88070;

    /* ── Obramowania ─────────────────────────────────────────── */
    --border-coral:   #EDD5C8;
    --border-mid:     #DFC4B2;

    /* ── Zaokrąglenia ────────────────────────────────────────── */
    --r-sm:  8px;
    --r-md:  12px;
    --r-lg:  16px;
    --r-xl:  20px;
    --r-full: 9999px;

    /* ── Typografia ──────────────────────────────────────────── */
    /* W rem (baza 16px) — skalowane przez html{font-size} z przełącznika A,
       identycznie jak MPM (root font-size). Wartości równe dawnym px. */
    --fs-xs:   0.6875rem; /* 11px */
    --fs-sm:   0.8125rem; /* 13px */
    --fs-base: 1rem;      /* 16px */
    --fs-md:   1.125rem;  /* 18px */
    --fs-lg:   1.375rem;  /* 22px */
    --fs-xl:   1.75rem;   /* 28px */
    --fs-hero: 2.25rem;   /* 36px */

    --font-body: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;

    /* ── Odstępy ─────────────────────────────────────────────── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;

    /* ── Rozmiary interaktywne (WCAG AAA) ───────────────────── */
    --btn-h:      52px;
    --input-h:    52px;
    --touch-min:  76px;

    /* ── Cienie ──────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(26, 10, 6, 0.05);
    --shadow-md: 0 4px 12px rgba(26, 10, 6, 0.08);
    --shadow-lg: 0 8px 24px rgba(26, 10, 6, 0.12);
    --shadow-xs: 0 1px 3px rgba(42, 10, 6, .05);

    /* ── Kontener ────────────────────────────────────────────── */
    --container-max: 1100px;
}

/* Tryb ciemny — sterowany klasą html.dark (przełącznik JS + localStorage),
   identycznie jak next-themes w MPM. Brak @media prefers-color-scheme:
   domyślnie jasny, OS jest ignorowany do pierwszego wyboru użytkownika. */
html.dark {
    color-scheme: dark;

    --bg-page:        #030712;
    --bg-surface:     #0d1117;
    --bg-card:        #111827;
    --bg-muted:       #070c14;

    --coral:          #D4745B;
    --coral-hover:    #C85A3E;
    --coral-dim:      rgba(212, 116, 91, 0.15);
    --coral-border:   #374151;

    --uwb-blue:       #4B7ED0;
    --uwb-blue-dim:   rgba(75, 126, 208, 0.15);

    --teal:           #22A094;
    --teal-dim:       rgba(34, 160, 148, 0.15);
    --danger:         #E74C3C;
    --danger-dim:     rgba(231, 76, 60, 0.15);

    --text-heading:   #f9fafb;
    --text-body:      #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted:     #6b7280;

    --border-coral:   #374151;
    --border-mid:     #1f2937;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}