/* ============================================================
    NEXTORY — CORE CSS
    Shared design system for static prototypes.
    Based on nextory.com design system.

    Usage:
      <link rel="stylesheet" href="/shared/css/nextory.css">
    or, from a prototype folder:
      <link rel="stylesheet" href="../shared/css/nextory.css">

    Fonts are expected at /shared/fonts/ (sibling to /shared/css/).
    ============================================================ */

/* ------------------------------------------------------------
    FONT FACES
    ------------------------------------------------------------ */
@font-face {
    font-family: "Nextory Sans Headline";
    src:
        url("../fonts/NextorySans-HeadlineRegular.woff2") format("woff2"),
        url("../fonts/NextorySans-HeadlineRegular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Nextory Sans Headline";
    src:
        url("../fonts/NextorySans-HeadlineDemiBold.woff2") format("woff2"),
        url("../fonts/NextorySans-HeadlineDemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Nextory Sans";
    src:
        url("../fonts/NextorySans-Regular.woff2") format("woff2"),
        url("../fonts/NextorySans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Nextory Sans";
    src:
        url("../fonts/NextorySans-Medium.woff2") format("woff2"),
        url("../fonts/NextorySans-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* Twemoji subset — only contains country-flag glyphs. Sits in --font-body
   ahead of the generic sans-serif so flag emojis (🇸🇪 🇫🇮 🇩🇪 …) render
   consistently across browsers, especially Chrome/Windows which otherwise
   show them as text glyphs. */
@font-face {
    font-family: "Twemoji Country Flags";
    src: url("../fonts/TwemojiCountryFlags-Subset.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* Restrict to the flag regional-indicator symbols only. The subset also
       maps U+0020 with a ~1.25em-wide advance; without this range the browser
       could render spaces from this font and blow out word spacing across all
       body text. */
    unicode-range: U+1F1E6-1F1FF;
}

/* ------------------------------------------------------------
    DESIGN TOKENS
    ------------------------------------------------------------ */
:root {
    /* Brand colors */
    --color-pink-200: #ffe0ec;
    --color-pink-300: #ff98af;
    --color-pink-400: #fc5978;
    --color-pink-500: #d7355b; /* Primary CTA background */
    --color-pink-600: #a40033;
    --color-pink-700: #730014;
    --color-pink-800: #420002;
    --color-purple-200: #ffe4ff;
    --color-purple-300: #f4cdff;
    --color-purple-500: #9364b6; /* Secondary/purple button */
    --color-purple-700: #421862; /* Header / hero section background */
    --color-purple-800: #290c41;
    --color-purple-900: #100020;
    --color-green-200: #e5ffc7;
    --color-green-300: #d0ff94; /* Lime green accent (e.g. phone frame) */
    --color-green-400: #a9f36a;
    --color-yellow-400: #fedd7e;
    --color-yellow-500: #fecd40;
    --color-yellow-600: #eaad0d;
    /* Neutral / sand */
    --color-sand-100: #f9f5f2; /* Light background */
    --color-sand-200: #eeebe8; /* Light text on dark, secondary button bg */
    --color-sand-300: #dedad7; /* Secondary button background */
    --color-sand-600: #6e6868;
    --color-sand-700: #4c4846; /* Secondary button text */
    --color-sand-800: #32302d; /* Default body text, dark background */
    --color-sand-900: #1f1c1a;
    --color-white: #ffffff;
    --color-black: #000000;
    /* Semantic aliases */
    --content-primary: var(--color-sand-800);
    --content-primary-light: var(--color-sand-200);
    --content-error: var(--color-pink-600);
    --background-light: var(--color-sand-100);
    --background-dark: var(--color-sand-800);
    --background-purple: var(--color-purple-300);
    --background-pink: var(--color-pink-400);
    --background-yellow: var(--color-yellow-400);
    --button-cta-bg: var(--color-pink-500);
    --button-cta-text: var(--color-white);
    --button-primary-bg: var(--color-sand-800);
    --button-primary-text: var(--color-sand-200);
    --button-secondary-bg: var(--color-sand-300);
    --button-secondary-text: var(--color-sand-700);
    --line-divider: var(--color-sand-300);
    /* Typography */
    --font-headline: "Nextory Sans Headline", sans-serif;
    --font-body: "Nextory Sans", "Twemoji Country Flags", sans-serif;
}

/* ------------------------------------------------------------
    RESET & BASE
    ------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* The HTML `hidden` attribute must win over any `display` set by a class.
   A class selector matches the UA `[hidden] { display: none }` on specificity
   and overrides it by cascade order, so toggling `el.hidden` silently fails on
   any element styled with `display: flex/grid/etc`. */
[hidden] {
    display: none !important;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--content-primary);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
    TYPOGRAPHY
    ------------------------------------------------------------ */
/* H1 — Hero headline */
h1,
.heading-1 {
    font-family: var(--font-headline);
    font-size: 50px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: -0.5px;
    color: var(--color-pink-500);
}
/* H2 — Section headline */
h2,
.heading-2 {
    font-family: var(--font-headline);
    font-size: 32px;
    font-weight: 600;
    line-height: 44px;
    letter-spacing: -0.32px;
}
/* H3 — Sub-section / card title */
h3,
.heading-3 {
    font-family: var(--font-headline);
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
    letter-spacing: 0.16px;
}
/* H4 — Section label / carousel heading */
h4,
.heading-4 {
    font-family: var(--font-headline);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.1px;
}
/* H5 — Small headline (e.g. activity card headline) */
h5,
.heading-5 {
    font-family: var(--font-headline);
    font-size: 17px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.17px;
}
/* Body text — default */
p,
.text-body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.16px;
}
/* Body text — small */
.text-small {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
}
/* Label / caption */
.text-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.1px;
}
/* Utility: text colors */
.text-on-dark {
    color: var(--color-sand-200);
}
.text-on-light {
    color: var(--color-sand-800);
}
.text-pink {
    color: var(--color-pink-500);
}
.text-purple {
    color: var(--color-purple-500);
}
.text-muted {
    color: var(--color-sand-600);
}

/* ------------------------------------------------------------
    NAVIGATION / HEADER
    ------------------------------------------------------------ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-purple-700); /* #421862 */
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header__logo {
    font-family: var(--font-headline);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-pink-400); /* The coral-pink Nextory wordmark */
    text-decoration: none;
}
.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Nav text links (e.g. "Logga in", "Sök") */
.nav__link {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--color-sand-200);
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.nav__link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

/* ------------------------------------------------------------
    BUTTONS
    ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.1px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition:
        filter 0.15s ease,
        opacity 0.15s ease;
}
.btn:hover {
    filter: brightness(0.9);
}
.btn:active {
    filter: brightness(0.8);
}
/* CTA — Primary call-to-action (coral/pink, main conversion) */
.btn-cta {
    background-color: var(--button-cta-bg); /* #d7355b */
    color: var(--button-cta-text); /* #ffffff */
    font-size: 16px;
    line-height: 24px;
    padding: 12px 20px;
    border-radius: 8px;
}
/* CTA — Small variant (e.g. in header) */
.btn-cta-sm {
    background-color: var(--button-cta-bg);
    color: var(--button-cta-text);
    font-size: 14px;
    line-height: 16px;
    padding: 8px 16px;
    border-radius: 8px;
}
/* Primary — Dark button (on light backgrounds) */
.btn-primary {
    background-color: var(--button-primary-bg); /* #32302d */
    color: var(--button-primary-text); /* #eeebe8 */
    font-size: 16px;
    line-height: 24px;
    padding: 12px 20px;
    border-radius: 8px;
}
/* Secondary — Light/sand button */
.btn-secondary {
    background-color: var(--button-secondary-bg); /* #dedad7 */
    color: var(--button-secondary-text); /* #4c4846 */
    font-size: 16px;
    line-height: 24px;
    padding: 12px 20px;
    border-radius: 8px;
}
/* Purple button (e.g. search) */
.btn-purple {
    background-color: var(--color-purple-500); /* #9364b6 */
    color: var(--color-white);
    font-size: 16px;
    line-height: 24px;
    padding: 12px 20px;
    border-radius: 8px;
}
/* Pill / rounded button (small tag variant) */
.btn-pill {
    background-color: var(--button-cta-bg);
    color: var(--button-cta-text);
    font-size: 14px;
    line-height: 16px;
    padding: 8px 16px;
    border-radius: 30px;
}
/* Full-width button */
.btn-full {
    width: 100%;
}

/* ------------------------------------------------------------
    LINKS (inline / text)
    ------------------------------------------------------------ */
.link {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-sand-200);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.link:hover {
    opacity: 0.75;
    text-decoration: underline;
}
/* Footer link */
.link-footer {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-sand-200);
    text-decoration: none;
}
.link-footer:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ------------------------------------------------------------
    SECTION BACKGROUNDS
    ------------------------------------------------------------ */
.bg-purple-dark {
    background-color: var(--color-purple-800);
} /* #290c41 */
.bg-purple {
    background-color: var(--color-purple-700);
} /* #421862 — hero/header */
.bg-light {
    background-color: var(--color-sand-100);
} /* #f9f5f2 — light sections */
.bg-dark {
    background-color: var(--color-sand-800);
} /* #32302d */
.bg-white {
    background-color: var(--color-white);
}

/* ------------------------------------------------------------
    FOOTER
    ------------------------------------------------------------ */
.footer {
    background-color: var(--color-purple-700);
    color: var(--color-sand-200);
    padding: 48px 24px 32px;
}
.footer__heading {
    font-family: var(--font-headline);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.17px;
    color: var(--color-sand-200);
    margin-bottom: 16px;
}
.footer__link {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-sand-200);
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
}
.footer__link:hover {
    text-decoration: underline;
    opacity: 0.8;
}
.footer__copyright {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-sand-600);
    margin-top: 32px;
}