/* FishExtender Blog design tokens.
   The approved blog palette (docs/DESIGN-AND-COPY.md in the handoff); it
   deliberately replaces the older app kit's teal/sand values. */

@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fredoka-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); }

:root {
    /* Colour */
    --blue: #0068AC;          /* headings, wordmark, footer */
    --link: #005F9D;          /* links, eyebrows, focus */
    --coral: #B74438;         /* app CTA, wordmark "Extender" */
    --ink: #244E50;           /* body text */
    --muted: #4D6562;         /* secondary text */
    --placeholder: #6E8189;
    --white: #FFFFFF;
    --line: rgba(0, 104, 172, .14);
    --line-soft: rgba(0, 95, 157, .14);
    --tile-welcome: #EFF8F3;
    --tile-packing: #E7EFF5;
    --tile-gifts: #CFE7EA;
    --tile-lead: #CAE8EA;
    --tile-links: #FFFEFC;
    --tip: #E3F1EC;
    --gold: #A78338;

    --page-bg: linear-gradient(180deg, #FFFEFD 0px, #FFFCFA 110px, #FFF8F4 440px, #FFF8F5 36%, #F7FAF6 70%, #EAF6F0 100%);
    --glow-peach: 248, 195, 171;
    --glow-mint: 165, 222, 206;

    /* Type. Fredoka and Nunito unless a font is picked in Settings > Design,
       which Ghost exposes as --gh-font-heading / --gh-font-body. */
    --font-display: var(--gh-font-heading, "Fredoka", "Trebuchet MS", sans-serif);
    --font-body: var(--gh-font-body, "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif);

    /* Shape */
    --radius-tile: 28px;
    --radius-card: 20px;
    --radius-panel: 24px;
    --radius-pill: 999px;
    --shadow-tile: 0 8px 25px rgba(17, 65, 84, .06);
    --shadow-card: 0 8px 24px rgba(22, 76, 80, .08), 0 2px 6px rgba(22, 76, 80, .035);
    --shadow-card-hover: 0 12px 30px rgba(18, 71, 91, .14);
    --shadow-cta: 0 8px 20px rgba(183, 68, 56, .18);

    /* Layout */
    --wrap: 1240px;
    --gutter: 40px;
    --header-h: 88px;
}

@media (max-width: 820px) {
    :root { --header-h: 78px; }
}

@media (max-width: 560px) {
    :root { --gutter: 22px; }
}