/* ==========================================================================
   thelink.id - premium themes and premium extras.

   Loaded by the public page, the code screen, the "turned off" page and the
   landing demo. The dashboard only needs the preview colours in
   config/themes.php.

   The phone colours: borrowed from the finishes people know from their
   handsets. Each is a full token set, so every control follows without
   extra rules. Second pass, September 2026: deeper shadows on the light
   themes, softer ones on the dark (0.36 - heavier read as a hole), and
   highlights tinted in the theme's own colour - near-white ones made the
   light themes look washed out, as if lit by a flash.
   ========================================================================== */

/* Natural titanium - warm light grey, the phone-back finish */
[data-theme="titanium"] {
    --bg:            #dcd7cf;
    --bg-glow-1:     rgba(255, 252, 245, 0.58);
    --bg-glow-2:     rgba(255, 249, 238, 0.38);
    --surface:       #eae6df;
    --surface-hover: #f0ede8;
    --surface-sunk:  #d1cbc1;
    --surface-edge:  rgba(252, 245, 232, 0.9);
    --glass:         rgba(234, 230, 223, 0.66);

    --text:          #2b2823;
    --text-soft:     #55504a;
    --text-muted:    #8a8279;
    --accent:        #2b2823;

    --light:         rgba(255, 246, 228, 0.82);
    --light-strong:  rgba(255, 249, 236, 0.96);
    --shade:         rgba(90, 78, 62, 0.24);
    --shade-strong:  rgba(90, 78, 62, 0.36);
    --glow:          rgba(252, 240, 218, 0.95);
}

/* Pink - deeper than a pastel, still soft enough to read on */
[data-theme="pink"] {
    --bg:            #f2c6d1;
    --bg-glow-1:     rgba(255, 240, 245, 0.55);
    --bg-glow-2:     rgba(255, 232, 240, 0.35);
    --surface:       #fbdde4;
    --surface-hover: #ffe8ed;
    --surface-sunk:  #e7b5c2;
    --surface-edge:  rgba(255, 232, 240, 0.92);
    --glass:         rgba(251, 221, 228, 0.7);

    --text:          #3d1f27;
    --text-soft:     #6b3f4a;
    --text-muted:    #9d6b78;
    --accent:        #3d1f27;

    --light:         rgba(255, 226, 236, 0.85);
    --light-strong:  rgba(255, 236, 243, 0.97);
    --shade:         rgba(122, 45, 66, 0.26);
    --shade-strong:  rgba(122, 45, 66, 0.38);
    --glow:          rgba(255, 218, 232, 0.95);
}

/* Teal - saturated mint */
[data-theme="teal"] {
    --bg:            #b6ddd6;
    --bg-glow-1:     rgba(238, 253, 249, 0.55);
    --bg-glow-2:     rgba(228, 250, 244, 0.35);
    --surface:       #d3ece7;
    --surface-hover: #e0f3ef;
    --surface-sunk:  #a4cfc7;
    --surface-edge:  rgba(226, 250, 244, 0.92);
    --glass:         rgba(211, 236, 231, 0.7);

    --text:          #123330;
    --text-soft:     #32544f;
    --text-muted:    #5f8880;
    --accent:        #123330;

    --light:         rgba(222, 250, 242, 0.85);
    --light-strong:  rgba(234, 253, 248, 0.97);
    --shade:         rgba(11, 71, 64, 0.26);
    --shade-strong:  rgba(11, 71, 64, 0.38);
    --glow:          rgba(206, 246, 236, 0.95);
}

/* Nebula - Galaxy seen in daylight: the same periwinkle, lit instead of lit
   from within. */
[data-theme="nebula"] {
    --bg:            #dfe1f5;
    --bg-glow-1:     rgba(242, 243, 255, 0.58);
    --bg-glow-2:     rgba(232, 234, 255, 0.38);
    --surface:       #edeefb;
    --surface-hover: #f5f6ff;
    --surface-sunk:  #cdd0ec;
    --surface-edge:  rgba(236, 238, 255, 0.92);
    --glass:         rgba(237, 238, 251, 0.7);

    --text:          #23264a;
    --text-soft:     #474b78;
    --text-muted:    #8085ad;
    --accent:        #23264a;

    --light:         rgba(232, 234, 255, 0.85);
    --light-strong:  rgba(242, 243, 255, 0.97);
    --shade:         rgba(45, 50, 110, 0.25);
    --shade-strong:  rgba(45, 50, 110, 0.36);
    --glow:          rgba(220, 224, 255, 0.95);
}

/* Beige - dark warm sand */
[data-theme="beige"] {
    --bg:            #1e1a14;
    --bg-glow-1:     rgba(255, 226, 180, 0.07);
    --bg-glow-2:     rgba(255, 214, 160, 0.04);
    --surface:       #2c261e;
    --surface-hover: #362f26;
    --surface-sunk:  #171310;
    --surface-edge:  rgba(255, 214, 160, 0.13);
    --glass:         rgba(44, 38, 30, 0.7);

    --text:          #f2e9dc;
    --text-soft:     #cabca9;
    --text-muted:    #97897a;
    --accent:        #f0dcbd;

    --light:         rgba(255, 212, 150, 0.09);
    --light-strong:  rgba(255, 220, 165, 0.16);
    --shade:         rgba(0, 0, 0, 0.36);
    --shade-strong:  rgba(0, 0, 0, 0.8);
    --glow:          rgba(255, 220, 170, 0.28);
}

/* Raspberry - dark berry, warm and quiet */
[data-theme="raspberry"] {
    --bg:            #230d16;
    --bg-glow-1:     rgba(255, 150, 190, 0.08);
    --bg-glow-2:     rgba(255, 120, 170, 0.05);
    --surface:       #371524;
    --surface-hover: #431a2c;
    --surface-sunk:  #1b0a11;
    --surface-edge:  rgba(255, 170, 205, 0.13);
    --glass:         rgba(55, 21, 36, 0.7);

    --text:          #f7e2ea;
    --text-soft:     #d5b3c1;
    --text-muted:    #a37e8e;
    --accent:        #ffc2d6;

    --light:         rgba(255, 150, 195, 0.1);
    --light-strong:  rgba(255, 165, 205, 0.17);
    --shade:         rgba(0, 0, 0, 0.36);
    --shade-strong:  rgba(0, 0, 0, 0.8);
    --glow:          rgba(255, 180, 210, 0.3);
}

/* Turquoise - deep lagoon */
[data-theme="turquoise"] {
    --bg:            #0b2124;
    --bg-glow-1:     rgba(120, 235, 230, 0.08);
    --bg-glow-2:     rgba(90, 210, 210, 0.05);
    --surface:       #123033;
    --surface-hover: #173b3f;
    --surface-sunk:  #08181a;
    --surface-edge:  rgba(130, 240, 232, 0.13);
    --glass:         rgba(18, 48, 51, 0.7);

    --text:          #dff2f1;
    --text-soft:     #aecfcd;
    --text-muted:    #7b9d9b;
    --accent:        #8fe8e0;

    --light:         rgba(110, 240, 230, 0.09);
    --light-strong:  rgba(130, 245, 236, 0.16);
    --shade:         rgba(0, 0, 0, 0.36);
    --shade-strong:  rgba(0, 0, 0, 0.8);
    --glow:          rgba(140, 240, 232, 0.3);
}

/* Galaxy - deep violet night */
[data-theme="galaxy"] {
    --bg:            #0f1024;
    --bg-glow-1:     rgba(120, 110, 255, 0.16);
    --bg-glow-2:     rgba(70, 190, 255, 0.10);
    --surface:       #1b1d3a;
    --surface-hover: #212448;
    --surface-sunk:  #15162e;
    --surface-edge:  rgba(160, 160, 255, 0.14);
    --glass:         rgba(27, 29, 58, 0.66);

    --text:          #e9e9ff;
    --text-soft:     #bcbce0;
    --text-muted:    #8384b0;
    --accent:        #b9a4ff;

    --light:         rgba(140, 125, 255, 0.13);
    --light-strong:  rgba(160, 145, 255, 0.21);
    --shade:         rgba(0, 0, 0, 0.36);
    --shade-strong:  rgba(0, 0, 0, 0.78);
    --glow:          rgba(185, 164, 255, 0.34);

    --sh-card:
        0 20px 44px rgba(0, 0, 0, 0.58),
        inset 0 0 0 1px rgba(160, 160, 255, 0.1);
}

/* Titanium violet - retired from the picker when Nebula joined: it sat too
   close to Galaxy. Kept here, and only here, so bringing it back is a single
   line in config/themes.php. */
[data-theme="violet"] {
    --bg:            #241f30;
    --bg-glow-1:     rgba(190, 165, 255, 0.08);
    --bg-glow-2:     rgba(160, 140, 235, 0.05);
    --surface:       #302941;
    --surface-hover: #38304c;
    --surface-sunk:  #1d1928;
    --surface-edge:  rgba(210, 195, 255, 0.10);
    --glass:         rgba(48, 41, 65, 0.68);

    --text:          #efeaf7;
    --text-soft:     #c4bad6;
    --text-muted:    #9a90ad;
    --accent:        #d9c9ff;

    --light:         rgba(200, 180, 255, 0.08);
    --light-strong:  rgba(210, 195, 255, 0.14);
    --shade:         rgba(0, 0, 0, 0.36);
    --shade-strong:  rgba(0, 0, 0, 0.7);
    --glow:          rgba(210, 195, 255, 0.26);
}

/* Matte finish on the coloured themes: a phone back diffuses light rather
   than reflecting it. */
[data-theme="titanium"] body::after,
[data-theme="pink"] body::after,
[data-theme="nebula"] body::after,
[data-theme="teal"] body::after { opacity: 0.6; mix-blend-mode: multiply; }

[data-theme="galaxy"] body::after { opacity: 0.28; mix-blend-mode: screen; }

[data-theme="raspberry"] body::after,
[data-theme="beige"] body::after,
[data-theme="turquoise"] body::after,
[data-theme="violet"] body::after { opacity: 0.34; mix-blend-mode: screen; }


/* ==========================================================================
   Premium extras - chosen under Theme in the dashboard, listed in
   config/styles.php. Each is an attribute on <html>, set only for premium.
   ========================================================================== */

/* ------------------------------------------------------------ wallpaper --
   Line patterns, the same as on the back of the business cards: an SVG used
   as a mask over the theme's own ink, faint, so one file fits every theme.
   Fixed and still - the browser draws it once. */
.wallpaper {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--text);
    opacity: 0.07;
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
}

/* Without a pattern the layer would be a flat tint over the whole page. The
   example pages keep the layer for their look switch, so hide it there. */
html:not([data-wallpaper]) .wallpaper { display: none; }

[data-wallpaper="waves"] .wallpaper { -webkit-mask-image: url("../images/wallpapers/waves.svg"); mask-image: url("../images/wallpapers/waves.svg"); -webkit-mask-size: 372px 64px; mask-size: 372px 64px; }
[data-wallpaper="lines"] .wallpaper { -webkit-mask-image: url("../images/wallpapers/lines.svg"); mask-image: url("../images/wallpapers/lines.svg"); -webkit-mask-size: 26px 26px; mask-size: 26px 26px; }
[data-wallpaper="dots"]  .wallpaper { -webkit-mask-image: url("../images/wallpapers/dots.svg");  mask-image: url("../images/wallpapers/dots.svg");  -webkit-mask-size: 24px 48px; mask-size: 24px 48px; }
[data-wallpaper="rings"] .wallpaper {
    -webkit-mask-image: url("../images/wallpapers/rings.svg"); mask-image: url("../images/wallpapers/rings.svg");
    -webkit-mask-size: 170vmax 170vmax; mask-size: 170vmax 170vmax;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: right bottom; mask-position: right bottom;
}

/* On a dark ground the lines are pressed in, darker than the page rather
   than lit: a background should sit back, not catch the eye. */
[data-theme="graphite"] .wallpaper,
[data-theme="beige"] .wallpaper,
[data-theme="raspberry"] .wallpaper,
[data-theme="turquoise"] .wallpaper,
[data-theme="galaxy"] .wallpaper,
[data-theme="violet"] .wallpaper { background-color: #000000; opacity: 0.3; }

/* ----------------------------------------------------------------- font --
   The whole page follows: tokens.css builds everything on --font. Only the
   chosen family is loaded, by page.php.

   The same font-size looks bigger or smaller from face to face. Measured
   against Inter on a real label ("Leave a review on Google Maps") by width
   and by the height of an x, Playfair came out 7% smaller, Nunito 8%,
   Oswald 10% - narrow letters read as small ones - and Montserrat even.
   font-size-adjust sets each face's x-height so they come out alike; the
   numbers are the face's own x-height times that correction. */
[data-font="classic"] { --font: 'Playfair Display', Georgia, 'Times New Roman', serif; font-size-adjust: 0.556; }
[data-font="rounded"] { --font: 'Nunito', 'Segoe UI', Arial, sans-serif;               font-size-adjust: 0.539; }
[data-font="modern"]  { --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
[data-font="strong"]  { --font: 'Oswald', 'Arial Narrow', Arial, sans-serif;            font-size-adjust: 0.65; }

/* ----------------------------------------------------------------- gold --
   A ring round the photo, a fine line round the card, gold icons and
   dividers. Never the buttons: gold as a line, not as a fill. The gold of
   logo-premium.svg: its darker end leads on light themes, its lighter end
   on dark ones. No white highlights - on a light page they looked burnt
   out, like a photo with the flash on. */
:root {
    --gold:      #a1875f;
    --gold-foil: linear-gradient(135deg, #a1875f 0%, #c3a26f 50%, #a1875f 100%);
}

[data-theme="graphite"],
[data-theme="beige"],
[data-theme="raspberry"],
[data-theme="turquoise"],
[data-theme="galaxy"],
[data-theme="violet"] {
    --gold:      #d1b17b;
    --gold-foil: linear-gradient(135deg, #d1b17b 0%, #a1875f 50%, #d1b17b 100%);
}

/* The gold is the card's edge: the card drops its own line, and the gold
   takes the same box and radius, so the curve runs evenly round the corners. */
[data-gold="1"] .glass-card { position: relative; border: 0; }
[data-gold="1"] .glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--gold-foil);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.8;
    pointer-events: none;
}

[data-gold="1"] .avatar {
    border: 3px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--gold-foil) border-box;
}

[data-gold="1"] .link-btn__icon,
[data-gold="1"] .pageshare,
[data-gold="1"] .divider__text,
[data-gold="1"] .quote__text::before,
[data-gold="1"] .quote__text::after { color: var(--gold); }

[data-gold="1"] .divider::before,
[data-gold="1"] .divider::after,
[data-gold="1"] .divider--plain::before {
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
    opacity: 0.8;
}

/* ---------------------------------------------------------------- action --
   The color of a button that does something - book, pick a price - in the
   theme's own family, only brighter, instead of one turquoise for every
   page. --act is the button, --act-hi its hover, --act-ink the text on it:
   white where it reads, dark on the light gold and the light turquoise. */
:root {
    --act:     #1c8f9c;
    --act-hi:  #2fb8ad;
    --act-ink: #ffffff;
}
[data-theme="titanium"]  { --act: #8a6d44; --act-hi: #a1875f; }
[data-theme="pink"]      { --act: #c8456b; --act-hi: #de6189; }
[data-theme="teal"]      { --act: #16877a; --act-hi: #1fa393; }
[data-theme="nebula"]    { --act: #5a5fcf; --act-hi: #7479e0; }
[data-theme="beige"]     { --act: #c89a58; --act-hi: #d8ae70; --act-ink: #1f1810; }
[data-theme="raspberry"] { --act: #d6457f; --act-hi: #e8659a; }
[data-theme="turquoise"] { --act: #2bb5a8; --act-hi: #45c9bd; --act-ink: #06201e; }
[data-theme="galaxy"]    { --act: #636cf5; --act-hi: #7f86ff; }
[data-theme="violet"]    { --act: #9068de; --act-hi: #a684ea; }

/* The gold line on a phone, where the card runs from edge to edge: only
   above and below, square at the ends (see .page__card in public.css). */
@media (max-width: 600px) {
    [data-gold="1"] .page__card::before {
        padding: 2px 0;
        border-radius: 0;
    }
}

/* --------------------------------------------------------------- bubbles --
   On a page the bubbles are frosted glass like the card under the buttons,
   only thinner: the ground shows through them, softened rather than hidden,
   and the shadow is kept to a minimum. A faint light edge gives them their
   round shape - a touch
   stronger on dark themes, where there is less light to draw it with. No
   hover effect: a bubble is there to be popped, and popping stays as it
   always was. The sparks of a popped bubble keep their own look from
   effects.css. */
:root {
    --bubble-edge: rgba(255, 255, 255, 0.24);
    --bubble-rim:  rgba(255, 255, 255, 0.16);
}

[data-theme="graphite"],
[data-theme="beige"],
[data-theme="raspberry"],
[data-theme="turquoise"],
[data-theme="galaxy"],
[data-theme="violet"] {
    --bubble-edge: rgba(255, 255, 255, 0.06);
    --bubble-rim:  rgba(255, 255, 255, 0.06);
}

.page .fx__bubble:not(.fx__spark),
.page .fx__bubble:not(.fx__spark):hover {
    /* Thin enough for a wallpaper to show through: the lines behind stay lines. */
    background: color-mix(in srgb, var(--surface) 14%, transparent);
    -webkit-backdrop-filter: blur(2.5px) saturate(130%);
    backdrop-filter: blur(2.5px) saturate(130%);
    border: 1px solid var(--bubble-edge);
    box-shadow:
        inset 0 1px 1px var(--bubble-rim),
        0 4px 12px color-mix(in srgb, var(--shade) 30%, transparent);
}