/* Bonn Café - cherry blossom on the Heerstraße, for bubble.bonn.cafe.
   Loaded after app.css, only when the account (or web.default_theme) selects
   it.

   A palette theme plus one signature: the header is printed on a strip of
   kirschbluete.jpg (static/bonncafe-banner.jpg) under a bark-coloured scrim,
   so the nav sits on the blossom in every appearance. Everything else is
   tokens and does not touch the layout.

   Every colour was sampled from the top of the photo:
     blossom bright #a86282, blossom mid #6e3e59, blossom pale #c296a9,
     sky #a7ccf0, sandstone facade #bb9d7e, bark #170e16.
   Text-bearing shades are those hues darkened (light) or lifted (dark) until
   they clear 4.5:1 on their surface. --accent-grad carries white text
   (buttons, active tabs, the compose button), so it stays deep blossom in
   every appearance rather than following the pale dark-mode accent.

   Token layering repeats app.css's four states, one specificity step higher
   so a theme's dark tokens beat the base theme's dark tokens regardless of
   file order. */

/* ---------- Tokens: light ---------- */
:root[data-theme="bonncafe"]{
    color-scheme:light;
    --bg:#fbf6f8;
    --bg-grad:radial-gradient(1200px 600px at 100% -10%,rgba(168,98,130,.09),transparent 60%),radial-gradient(900px 500px at -10% 0%,rgba(167,204,240,.16),transparent 55%);
    --surface:#ffffff;
    --surface-2:#f7eef2;
    --surface-3:#efe2e8;
    --text:#22151f;
    --text-soft:#47343f;
    --muted:#76626d;
    --line:#efe3e9;
    --line-strong:#e0cdd6;
    --accent:#8a3e66;
    --accent-strong:#6e3e59;
    --accent-soft:rgba(168,98,130,.12);
    --accent-grad:linear-gradient(135deg,#a8527c 0%,#8a3e66 55%,#6e3e59 100%);
    --accent-shadow:rgba(138,62,102,.30);
    --like:#c0305f;
    --like-soft:rgba(192,48,95,.10);
    --boost:#2f6a9e;
    --boost-soft:rgba(47,106,158,.10);
    --mention:#8a6436;
    --mention-soft:rgba(187,157,126,.16);
    --danger:#c0305f;
    --shadow:0 1px 2px rgba(23,14,22,.04),0 1px 3px rgba(23,14,22,.05);
    --shadow-md:0 4px 16px rgba(23,14,22,.07),0 2px 6px rgba(23,14,22,.04);
    --shadow-lg:0 18px 40px rgba(23,14,22,.12),0 6px 14px rgba(23,14,22,.06);
}

/* ---------- Tokens: dark ---------- */
@media(prefers-color-scheme:dark){
    :root[data-theme="bonncafe"][data-appearance="auto"],:root[data-theme="bonncafe"]:not([data-appearance]){
        color-scheme:dark;
        --bg:#140c13;
        --bg-grad:radial-gradient(1200px 600px at 100% -10%,rgba(168,98,130,.14),transparent 60%),radial-gradient(900px 500px at -10% 0%,rgba(167,204,240,.06),transparent 55%);
        --surface:#1f141d;
        --surface-2:#291b26;
        --surface-3:#342230;
        --text:#f6eaf0;
        --text-soft:#e0cdd7;
        --muted:#b39aa8;
        --line:#33232f;
        --line-strong:#46303f;
        --accent:#e7a1c3;
        --accent-strong:#f4c6da;
        --accent-soft:rgba(231,161,195,.14);
        --accent-grad:linear-gradient(135deg,#a8527c 0%,#8a3e66 55%,#6e3e59 100%);
        --accent-shadow:rgba(168,82,124,.35);
        --like:#ff8fb1;
        --like-soft:rgba(255,143,177,.14);
        --boost:#a7ccf0;
        --boost-soft:rgba(167,204,240,.14);
        --mention:#d9bd98;
        --mention-soft:rgba(217,189,152,.14);
        --danger:#ff8fa3;
        --shadow:none;
        --shadow-md:0 4px 16px rgba(0,0,0,.35);
        --shadow-lg:0 18px 40px rgba(0,0,0,.5);
    }
}
/* Explicit dark: the same tokens with no media query. Vanilla CSS cannot reuse
   an @media block from a plain selector and this project has no build step;
   keep the two copies in sync rather than adding one. */
:root[data-theme="bonncafe"][data-appearance="dark"],:root[data-theme="bonncafe"][data-appearance="black"]{
    color-scheme:dark;
    --bg:#140c13;
    --bg-grad:radial-gradient(1200px 600px at 100% -10%,rgba(168,98,130,.14),transparent 60%),radial-gradient(900px 500px at -10% 0%,rgba(167,204,240,.06),transparent 55%);
    --surface:#1f141d;
    --surface-2:#291b26;
    --surface-3:#342230;
    --text:#f6eaf0;
    --text-soft:#e0cdd7;
    --muted:#b39aa8;
    --line:#33232f;
    --line-strong:#46303f;
    --accent:#e7a1c3;
    --accent-strong:#f4c6da;
    --accent-soft:rgba(231,161,195,.14);
    --accent-grad:linear-gradient(135deg,#a8527c 0%,#8a3e66 55%,#6e3e59 100%);
    --accent-shadow:rgba(168,82,124,.35);
    --like:#ff8fb1;
    --like-soft:rgba(255,143,177,.14);
    --boost:#a7ccf0;
    --boost-soft:rgba(167,204,240,.14);
    --mention:#d9bd98;
    --mention-soft:rgba(217,189,152,.14);
    --danger:#ff8fa3;
    --shadow:none;
    --shadow-md:0 4px 16px rgba(0,0,0,.35);
    --shadow-lg:0 18px 40px rgba(0,0,0,.5);
}

/* ---------- Tokens: true black ---------- */
:root[data-theme="bonncafe"][data-appearance="black"]{
    --bg:#000000;
    --bg-grad:none;
    --surface:#0b070a;
    --surface-2:#150e13;
    --surface-3:#1e141b;
    --muted:#a58c9a;
    --line:#1e141b;
    --line-strong:#2c1e28;
}

/* ---------- Signature: the blossom header ---------- */
/* The scrim is bark at the edges, where the logo and the sign-out button sit,
   and thins toward the middle so the blossom shows. It is opaque enough that
   the frosted-glass blur app.css puts on the header has nothing to do. */
[data-theme="bonncafe"] .header{
    background:
        linear-gradient(90deg,rgba(23,14,22,.86) 0%,rgba(58,31,48,.58) 38%,rgba(58,31,48,.52) 62%,rgba(23,14,22,.84) 100%),
        url("bonncafe-banner.jpg") center 38%/cover no-repeat,
        #3a1f30;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:2px solid #a86282;
}
[data-theme="bonncafe"][data-appearance="black"] .header{border-bottom-color:#6e3e59}
[data-theme="bonncafe"] .header .logo{color:#fff8fb;text-shadow:0 1px 3px rgba(23,14,22,.7)}
[data-theme="bonncafe"] .header .logo span b{color:#f4c6da}
[data-theme="bonncafe"] .header .logo-mark img{filter:drop-shadow(0 1px 2px rgba(23,14,22,.6))}
[data-theme="bonncafe"] .header .nav-link,
[data-theme="bonncafe"] .header .mobile-menu-trigger{color:rgba(255,240,247,.86)}
[data-theme="bonncafe"] .header .nav-link:hover,
[data-theme="bonncafe"] .header .mobile-menu-trigger:hover{background:rgba(255,255,255,.14);color:#ffffff}
[data-theme="bonncafe"] .header .nav-link.active,
[data-theme="bonncafe"] .header .nav-link[aria-current="page"]{background:rgba(244,198,218,.22);color:#ffffff}
/* The account menu opens out of the header but is an ordinary panel; give its
   links back the page colours the rule above would otherwise inherit into. */
[data-theme="bonncafe"] .header .mobile-menu-panel{color:var(--text)}

/* ---------- The handful of selectors the palette implies ---------- */
[data-theme="bonncafe"] .status-body a,[data-theme="bonncafe"] .profile-bio a{color:var(--accent)}
[data-theme="bonncafe"] .status-body a:hover,[data-theme="bonncafe"] .profile-bio a:hover{color:var(--accent-strong);text-decoration:underline}