/* =============================================================================
   otevri.se — DESIGN TOKENY
   Jediný zdroj pravdy pro barvy. Načítá se jako první v header.tt,
   takže hodnoty jsou dostupné všem ostatním stylům.

   Barvy vzorkované z design/design.jpg, plochy ztmavené dle zadání.

   BREAKPOINTY (media query nepodporují custom properties, proto jen dohoda):
     640px  telefon - kompaktní hlavička, spodní lišta, 16px pole
     768px  tablet na výšku - jednosloupcové layouty
     1024px malý notebook
     Telefon na šířku: (max-height: 500px) and (pointer: coarse)
     Nové styly používej jen tyto hodnoty.

   FUNKČNÍ LOGIKA AKCENTŮ:
     růžová = sociální funkce (seznamka, chat, komunita, zprávy)
     zlatá  = obsahové funkce (diskuze, příběhy, ankety, dotazníky)

   POZOR: Nepřidávej lokální :root bloky do šablon. Pokud stránka
   potřebuje vlastní odstín, přidej sem nový token.
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       PLOCHY — vrstvení base → app → panel → karta
       V tomto rozsahu světlosti jsou rozdíly ploch opticky téměř
       nerozlišitelné (~1.03:1), proto strukturu nesou OKRAJE (1.65:1).
       ------------------------------------------------------------------------- */
    --bg-dark: #160000;              /* pozadí stránky */
    --bg-base: #160000;              /* header, footer */
    --bg-dark-lighter: #1b0000;      /* panel, stat pás */
    --card-bg: #200000;              /* karta */
    --glass-bg: #1b0000;             /* panel, sidebar box */
    --surface-sidebar: #1b0000;      /* sidebar box */
    --surface-inset: #2a0000;        /* pill, vnořený prvek, input */
    --surface-hover: #300000;        /* hover stav */
    --glass-border: #6b1520;         /* okraj karet — nese strukturu */
    --border-subtle: #3d0d14;        /* jemnější dělící linky */

    /* -------------------------------------------------------------------------
       AKCENT 1 — růžová (sociální)
       ------------------------------------------------------------------------- */
    --pink: #ed5880;                 /* dlaždice ikon, primární akce */
    --pink-link: #d16c8b;            /* odkazy v obsahu */
    --pink-bright: #f8b5c7;          /* hover, tečky, zvýraznění */
    --pink-badge: #e4547c;           /* badge, notifikace */
    --pink-soft: rgba(237, 88, 128, 0.14);

    /* Plná akční plocha s BÍLÝM textem (tlačítka, CTA, badge). Světlá
       --pink má s bílou jen 3.3:1 - WCAG AA chce pro běžný text 4.5:1.
       #c8385f: bílá 5.0:1, proti pozadí stránky 4.0:1 (tvar tlačítka čitelný) */
    --action-bg: #c8385f;
    --action-bg-hover: #b02d52;      /* hover tmavší, ne světlejší - kontrast neklesá */

    /* -------------------------------------------------------------------------
       AKCENT 2 — zlatá (obsah)
       ------------------------------------------------------------------------- */
    --gold: #ce9a56;                 /* dlaždice ikon */
    --gold-link: #dbb288;            /* odkazy v obsahu */
    --gold-bright: #e5b478;          /* access code, odhlásit se */
    --gold-soft: rgba(206, 154, 86, 0.14);
    --action-gold: #9a6a30;          /* zlatá plocha s bílým textem: 4.7:1 */
    --on-gold: #160000;              /* text na světlé zlaté (#ce9a56): 8.1:1 */

    /* -------------------------------------------------------------------------
       PRIMÁRNÍ / SEKUNDÁRNÍ (aliasy pro zpětnou kompatibilitu)
       ------------------------------------------------------------------------- */
    --primary-color: #ed5880;
    --primary-hover: #f8b5c7;
    --primary-light: #f8b5c7;
    --primary-dark: #d1416a;
    --secondary-color: #ce9a56;
    --secondary-dark: #b8863f;
    --secondary-light: #dbb288;

    /* Původní paleta — přemapovaná, aby starý kód nevypadl z barevnosti */
    --dusty-rose: #d16c8b;
    --dusty-rose-light: #f8b5c7;
    --dusty-rose-dark: #b04f6a;
    --dark-plum: #2a0000;
    --dark-plum-light: #300000;
    --accent-peach: #f8b5c7;
    --accent-sage: #ce9a56;
    --accent-plum: #2a0000;
    --premium-gold: #ce9a56;

    /* -------------------------------------------------------------------------
       TEXT — kontrast na #160000: 19.4 / 16.3 / 7.7 : 1
       ------------------------------------------------------------------------- */
    --text-primary: #fff8f9;
    --text-secondary: #f7e1e5;
    --text-muted: #d8879f;
    --color-text-primary: #fff8f9;
    --color-text-secondary: #f7e1e5;
    --color-text-muted: #d8879f;

    /* Pozadí varianty pro starý kód */
    --color-bg-secondary: #1b0000;
    --color-bg-tertiary: #2a0000;

    /* -------------------------------------------------------------------------
       STAVOVÉ BARVY — semantika oddělená od akcentů
       ------------------------------------------------------------------------- */
    --success-color: #5c9e7a;
    --success-light: #7db99a;
    --danger-color: #e05252;
    --warning-color: #ce9a56;
    --info-color: #d16c8b;
    --status-online: #ed5880;
    --status-active: #ce9a56;

    /* -------------------------------------------------------------------------
       DLAŽDICE SLUŽEB — dle funkční logiky
       ------------------------------------------------------------------------- */
    --service-dating: linear-gradient(145deg, #f15e85, #ea5279);
    --service-chat: linear-gradient(145deg, #f15e85, #ea5279);
    --service-community: linear-gradient(145deg, #f15e85, #ea5279);
    --service-forum: linear-gradient(145deg, #ce9954, #ca9651);
    --service-blog: linear-gradient(145deg, #ce9954, #ca9651);
    --service-polls: linear-gradient(145deg, #ce9954, #ca9651);
    --service-settings: #300000;

    --gradient-pink: #ed5880;
    --gradient-purple: #ed5880;
    --gradient-orange: #ce9a56;
    --gradient-green: #ce9a56;

    /* -------------------------------------------------------------------------
       BLOG — sub-brand, sladěný s hlavní paletou
       ------------------------------------------------------------------------- */
    --blog-bg-deep: #160000;
    --blog-bg-card: #200000;
    --blog-bg-hover: #300000;
    --blog-bg-input: #2a0000;
    --blog-border: #6b1520;
    --blog-border-focus: rgba(237, 88, 128, 0.45);
    --blog-glow: rgba(237, 88, 128, 0.08);
    --blog-accent-warm: #dbb288;
    --blog-accent-rose: #d16c8b;
    --blog-accent-gold: #ce9a56;
    --blog-text-primary: #fff8f9;
    --blog-text-secondary: #f7e1e5;
    --blog-text-muted: #d8879f;
    --blog-font-display: 'Cormorant Garamond', Georgia, serif;
    --blog-font-body: 'Source Sans 3', -apple-system, sans-serif;

    /* -------------------------------------------------------------------------
       SPACING / RADIUS / SHADOW
       ------------------------------------------------------------------------- */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --border-radius: 12px;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* -------------------------------------------------------------------------
       DOPLNĚNÉ SIROTKY
       Tyto tokeny se v kódu používaly, ale nebyly nikde definované —
       padaly na výchozí hodnotu prohlížeče (obvykle průhledná/černá).
       ------------------------------------------------------------------------- */
    --bg-card: #200000;
    --bg-secondary: #1b0000;
    --bg-tertiary: #2a0000;
    --bg-primary: #160000;
    --color-bg-primary: #160000;
    --color-surface: #200000;
    --input-bg: #2a0000;

    --border-color: #6b1520;
    --color-border: #6b1520;

    --color-primary: #ed5880;
    --primary-color-dark: #d1416a;
    --primary-rgb: 237, 88, 128;

    --color-success: #5c9e7a;
    --success: #5c9e7a;
    --color-danger: #e05252;
    --error: #e05252;
    --warning: #ce9a56;

    --radius-full: 999px;
    --border-radius-lg: 16px;
}