/* Single source of truth for the brand palette. Referenced via var(--color-*)
   across style.css, landing.css, and the SVG components (SectionDivider /
   FeatureRoute) so a colour is only ever defined once. */
:root {
    --color-pink: #fd78ae;
    --color-yellow: #ffe552;
    --color-green: #50c3c2;
    --color-cyan: #15d1ff;
    --color-teal: #2ed3cc;
    --color-purple: #9595fe;
    --color-blue: #007bff;
    --color-ink: #333333;
    --color-ink-soft: #444444;
    --color-white: #ffffff;
    --color-backdrop: rgba(0, 0, 0, 0.5);
}

body {
    font-weight: 400;
    font-style: normal;
    background-color: var(--color-pink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: var(--color-ink);
}

main {
    max-width: 640px;
    display: flex;
    flex-direction: column;
}

.landing {
    width: 360px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Barriecito", sans-serif;
}

.page {
    padding: 1em;
}

.sheet {
    background-color: var(--color-white);
    padding: 2em;
}

.format-writing {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
}

.goto-home-logo {
    display: inline-block;
}

small {
    font-size: 1em;
    margin-bottom: 2em;
    color: var(--color-ink-soft);
}

/* Links are never blue: palette yellow with a hand-drawn squiggly underline.
   On yellow backgrounds they flip to pink (see landing.css). */
a {
    color: var(--color-yellow);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 2px;
}

a:hover {
    text-decoration: underline wavy;
    text-decoration-thickness: 2px;
}

.title {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    padding: 3em;
    gap: 0.5em;
    font-family: "Luckiest Guy", sans-serif;
}

.title h1 {
    font-size: 5em;
    margin: 0;
}

.title p {
    margin: 0;
    font-size: 1.2em;
    font-family: "Barriecito", sans-serif;
}

.title::before {
    content: "";
    position: absolute;
    background: var(--color-pink);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    transform: skewX(-2deg) skewY(-3deg);
}

.buttons {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.button {
    position: relative;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 1em;
    text-decoration: none;
    transition: transform 80ms ease-in-out;
}

.button::before {
    content: "";
    position: absolute;
    background: var(--bg-color);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    transform: var(--bg-skew);
    box-shadow: 10px 10px 0 0px var(--color-ink);
}

.button:hover {
    transform: scale(1.1);
    text-decoration: none;
}

.app-store-link {
    --bg-color: var(--color-teal);
    --bg-skew: skewX(1deg) skewY(3deg);
}

.google-play-link {
    --bg-color: var(--color-blue);
    --bg-skew: skewX(2deg) skewY(-1deg);
}

.coming-soon {
    padding: 3em;
    transform: rotate(2deg);
    font-size: 2.2em;

    --bg-color: var(--color-purple);
    --bg-skew: skewX(1deg) skewY(1deg);
}

.coming-soon::before {
    box-shadow: none;
    /* border: 2px solid #333; */
}

dialog {
    appearance: none;
    padding: 2em;
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
}

dialog:focus,
dialog:focus-visible {
    outline: none;
    box-shadow: none;
}

::backdrop {
    background: var(--color-backdrop);
}

.info {
    margin: 0.5em 0;
    font-size: 1em;
    color: var(--color-ink-soft);
    font-family: "Special Elite", system-ui;
}

dialog + .info {
    margin-top: 3em;
}

.info a {
    color: var(--color-yellow);
    text-decoration: underline wavy;
    text-underline-offset: 0.18em;
}

/* "Back to home" — the .info directly after the store buttons. Clear it well
   below the buttons' drop shadows so it isn't buried, and give it a comfortable
   tap target on touch. */
.landing .buttons + .info {
    margin-top: 2.5em;
}

.landing .buttons + .info a {
    display: inline-block;
    padding: 0.5em 0.75em;
}

.sym::before {
    content: "@";
    color: var(--color-pink);
}

/* ---------- Responsive (join / invite page) ---------- */
@media (max-width: 720px) {
    /* .landing is a fixed 360px column — let it shrink on small phones and give
       it a little side padding so the stacked buttons' drop shadows have room. */
    .landing {
        width: 100%;
        max-width: 360px;
        padding: 0 1em;
        box-sizing: border-box;
    }

    /* Side-by-side store buttons overflow a phone's width — stack them and let
       each fill the column (mirrors the hero on the landing page). */
    .landing .buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 1em;
        width: 100%;
    }

    .landing .store-button {
        justify-content: center;
    }
}