/* ============================================================
   WINNOW — Design system · core.css
   Shared tokens + components used by BOTH page families.

   Load order:
     public pages  → core.css + public.css
     account pages → core.css + private.css
   Never load public.css and private.css on the same page.

   Rule of thumb: a component needed in both contexts lives
   here — never copy it into public.css or private.css.
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted fonts (latin subsets, from Google Fonts).
   Inter and Fraunces are variable files shared across weights.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/anton-400-latin-e57915c86b86dbb75d04cce3376a8343.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/fraunces-italic-600-latin-be1b7d1cec18db968398c1662676368c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/fraunces-italic-600-latin-be1b7d1cec18db968398c1662676368c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibmplexmono-400-latin-814fe1615d4dbc7bbd92d26a6bda0905.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibmplexmono-500-latin-6708425c446b05de1c2d471a0eaf4099.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-400-latin-65850a373e258f1c897a2b3d75eb74de.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-400-latin-65850a373e258f1c897a2b3d75eb74de.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-400-latin-65850a373e258f1c897a2b3d75eb74de.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/inter-400-latin-65850a373e258f1c897a2b3d75eb74de.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------ */
:root {
    /* brand palette */
    --wine:          #6b1529;
    --wine-bright:   #832038;
    --burgundy:      #430b18;
    --burgundy-deep: #2c0711;
    --maroon-ink:    #26060f;
    --black:         #0c0b0c;
    --cream:         #fdf3de;
    --cream-70:      rgba(253, 243, 222, 0.72);
    --cream-45:      rgba(253, 243, 222, 0.45);
    --cream-line:    rgba(253, 243, 222, 0.16);
    --ink:           #150809;
    --ink-65:        rgba(21, 8, 9, 0.68);
    --ink-45:        rgba(21, 8, 9, 0.45);
    --ink-line:      rgba(21, 8, 9, 0.10);

    /* light (account) surfaces */
    --canvas:      #f7ecd7;
    --card-bg:     #fffdf8;
    --card-line:   rgba(21, 8, 9, 0.08);
    --field-line:  rgba(21, 8, 9, 0.20);
    --shadow-card: 0 1px 2px rgba(21, 8, 9, 0.05), 0 10px 28px -20px rgba(21, 8, 9, 0.28);

    /* status accents */
    --green: #2e7d4f;
    --amber: #c9922f;

    /* type */
    --font-display: "Anton", "Arial Narrow", sans-serif;
    --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono:    "IBM Plex Mono", "SF Mono", monospace;
    --font-poster:  "Fraunces", Georgia, serif;

    /* spacing */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6.5rem;

    /* shape + layout */
    --radius:      10px;
    --radius-card: 16px;
    --max-w: 1160px;

    /* focus ring color — dark contexts override to cream */
    --focus-ring: var(--wine);
}

/* ------------------------------------------------------------
   Reset + base typography
   ------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

em { font-style: italic; }

a { color: inherit; }

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* brand mark link (headers, footers size the img themselves) */
.brand { display: inline-flex; }

/* ------------------------------------------------------------
   Chip — mono label (badges, eyebrows, statuses)
   ------------------------------------------------------------ */
.chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(253, 243, 222, 0.32);
    border-radius: 7px;
    padding: 0.42rem 0.95rem 0.36rem;
    white-space: nowrap;
}
.chip--ink {
    color: var(--wine);
    background: rgba(107, 21, 41, 0.05);
    border-color: rgba(107, 21, 41, 0.32);
}
.chip--dark {
    background: rgba(253, 243, 222, 0.07);
    border-color: rgba(253, 243, 222, 0.2);
}

/* wraps multiple .chip elements together (e.g. content type + genre chips) */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

/* ------------------------------------------------------------
   Buttons — modern, sentence case
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.78rem 1.6rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* solid wine — the primary action everywhere */
.btn-primary {
    background: var(--wine);
    color: var(--cream);
    border-color: rgba(253, 243, 222, 0.14);
}
.btn-primary:hover {
    background: var(--wine-bright);
    transform: translateY(-1px);
}

/* outlined, for dark surfaces */
.btn-ghost {
    background: transparent;
    color: var(--cream);
    border-color: rgba(253, 243, 222, 0.38);
}
.btn-ghost:hover {
    border-color: var(--cream);
    background: rgba(253, 243, 222, 0.07);
}

/* outlined, for light surfaces */
.btn-outline-ink {
    background: transparent;
    color: var(--ink);
    border-color: rgba(21, 8, 9, 0.3);
}
.btn-outline-ink:hover {
    border-color: var(--ink);
    background: rgba(21, 8, 9, 0.04);
}

/* cream pill (header CTA on dark surfaces) */
.btn-light {
    background: var(--cream);
    color: var(--ink);
    border-radius: 999px;
    padding: 0.55rem 1.3rem;
}
.btn-light:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

/* muted taupe (secondary "Back" actions on light surfaces) */
.btn-muted {
    background: #a89b8e;
    color: #fffdf8;
}
.btn-muted:hover { background: #97897b; transform: translateY(-1px); }

.btn-lg { padding: 0.95rem 2.1rem; font-size: 1rem; }
.btn-sm { padding: 0.45rem 1rem; font-size: 0.82rem; border-radius: 8px; }

/* ------------------------------------------------------------
   Motion preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}