/* ============================================================================
   paperstars — theme override  (injected by the paperstars-theme nginx sidecar)
   ----------------------------------------------------------------------------
   The app is Skeleton v4 + Tailwind v4. Its whole look is the "wishlist" theme,
   defined as CSS custom properties on [data-theme="wishlist"]. We redefine two
   ramps at higher specificity (:root[data-theme]) so this wins on the cascade:

     --color-primary-*  : the accent  (was purple hue 320) -> OLIVE PEA
     --color-surface-*  : backgrounds (was purple-tinted)  -> NEUTRAL near-white/black

   Because Skeleton drives light mode from surface-50 and dark mode from
   surface-950, overriding the one ramp fixes BOTH modes at once:
     light mode -> near-white bg, dark text
     dark  mode -> near-black neutral bg, light text  ("light theme but dark")

   SECTION 2 then paints the home "family view" cards as muted-rainbow paper
   strips (tanzaku), cycling 6 dusty hues — light + dark variants.
   ============================================================================ */

:root[data-theme="wishlist"] {
    /* ---- accent: olive pea (Aria's pick), OKLCH hue ~116 ---- */
    --color-primary-50:  oklch(0.962 0.018 116);
    --color-primary-100: oklch(0.928 0.030 116);
    --color-primary-200: oklch(0.878 0.045 116);
    --color-primary-300: oklch(0.812 0.058 116);
    --color-primary-400: oklch(0.730 0.066 116);
    --color-primary-500: oklch(0.640 0.070 116);
    --color-primary-600: oklch(0.566 0.064 116);
    --color-primary-700: oklch(0.482 0.055 116);
    --color-primary-800: oklch(0.400 0.045 116);
    --color-primary-900: oklch(0.330 0.036 116);
    --color-primary-950: oklch(0.270 0.028 116);

    /* ---- surface: neutral with a whisper of warmth (hue ~110, tiny chroma) ---- */
    --color-surface-50:  oklch(0.986 0.0025 110);
    --color-surface-100: oklch(0.967 0.0030 110);
    --color-surface-200: oklch(0.930 0.0040 110);
    --color-surface-300: oklch(0.872 0.0050 110);
    --color-surface-400: oklch(0.742 0.0060 110);
    --color-surface-500: oklch(0.620 0.0070 110);
    --color-surface-600: oklch(0.512 0.0070 110);
    --color-surface-700: oklch(0.412 0.0060 110);
    --color-surface-800: oklch(0.300 0.0050 110);
    --color-surface-900: oklch(0.235 0.0040 110);
    --color-surface-950: oklch(0.178 0.0035 110);

    /* ---- muted-rainbow "paper strip" palette (dull saturation) ----
       each hue: --psN accent (bar + avatar/progress), --psN-l light tint, --psN-d dark tint */
    --ps1: #CB5C54; --ps1-l: #F6E4E2; --ps1-d: #33211F; /* red    */
    --ps2: #CE8340; --ps2-l: #F7E9D8; --ps2-d: #33271A; /* orange */
    --ps3: #CCA83E; --ps3-l: #F5EED2; --ps3-d: #2F2A16; /* yellow (warm gold) */
    --ps4: #82A85B; --ps4-l: #E9F0DF; --ps4-d: #232A1B; /* green  */
    --ps5: #7E99C2; --ps5-l: #E4E9F3; --ps5-d: #1E2431; /* blue   */
    --ps6: #A079BE; --ps6-l: #ECE3F3; --ps6-d: #271E30; /* purple */
}

/* ============================================================================
   SECTION 2 — muted-rainbow paper strips on the home "family view".
   Scoped to [data-testid="list-container"], so ONLY the person/list cards on the
   home page are affected — item cards, admin, etc. keep the plain olive accent.
   Each card is a direct .card child; .bg-primary-500 inside it is the avatar
   circle + the claimed-progress bar, recolored to match the card's hue.
   ============================================================================ */

[data-testid="list-container"] > .card {
    position: relative;
    overflow: hidden;
}
/* the colored "tie" bar down the left edge of each strip */
[data-testid="list-container"] > .card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--strip, var(--color-primary-500));
}

/* --- light-mode tints (default) --- */
[data-testid="list-container"] > .card:nth-child(6n + 1) { --strip: var(--ps1); background-color: var(--ps1-l) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 2) { --strip: var(--ps2); background-color: var(--ps2-l) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 3) { --strip: var(--ps3); background-color: var(--ps3-l) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 4) { --strip: var(--ps4); background-color: var(--ps4-l) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 5) { --strip: var(--ps5); background-color: var(--ps5-l) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 6) { --strip: var(--ps6); background-color: var(--ps6-l) !important; }

/* --- dark-mode tints (data-mode="dark" lives on an ancestor) --- */
[data-mode="dark"] [data-testid="list-container"] > .card:nth-child(6n + 1) { background-color: var(--ps1-d) !important; }
[data-mode="dark"] [data-testid="list-container"] > .card:nth-child(6n + 2) { background-color: var(--ps2-d) !important; }
[data-mode="dark"] [data-testid="list-container"] > .card:nth-child(6n + 3) { background-color: var(--ps3-d) !important; }
[data-mode="dark"] [data-testid="list-container"] > .card:nth-child(6n + 4) { background-color: var(--ps4-d) !important; }
[data-mode="dark"] [data-testid="list-container"] > .card:nth-child(6n + 5) { background-color: var(--ps5-d) !important; }
[data-mode="dark"] [data-testid="list-container"] > .card:nth-child(6n + 6) { background-color: var(--ps6-d) !important; }

/* recolor the avatar circle + claimed-progress bar to match each card's hue
   (only when the list has no user-chosen custom color, i.e. the .bg-primary-500
   default is present — a user who sets their own icon color keeps it) */
[data-testid="list-container"] > .card:nth-child(6n + 1) .bg-primary-500 { background-color: var(--ps1) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 2) .bg-primary-500 { background-color: var(--ps2) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 3) .bg-primary-500 { background-color: var(--ps3) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 4) .bg-primary-500 { background-color: var(--ps4) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 5) .bg-primary-500 { background-color: var(--ps5) !important; }
[data-testid="list-container"] > .card:nth-child(6n + 6) .bg-primary-500 { background-color: var(--ps6) !important; }

/* ============================================================================
   SECTION 2b — muted-rainbow paper strips on the ITEM cards inside a wishlist.
   Items live in [data-testid="items-container"]; each item is a wrapper <div>
   holding a .card. We tint the card + add a hue strip, cycling the same 6 hues.
   Buttons/claims keep the olive accent (we don't recolor .bg-primary-500 here).
   ============================================================================ */
[data-testid="items-container"] > div > .card {
    position: relative;
    overflow: hidden;
}
[data-testid="items-container"] > div > .card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--strip, var(--color-primary-500));
}
/* light-mode tints */
[data-testid="items-container"] > div:nth-child(6n + 1) > .card { --strip: var(--ps1); background-color: var(--ps1-l) !important; }
[data-testid="items-container"] > div:nth-child(6n + 2) > .card { --strip: var(--ps2); background-color: var(--ps2-l) !important; }
[data-testid="items-container"] > div:nth-child(6n + 3) > .card { --strip: var(--ps3); background-color: var(--ps3-l) !important; }
[data-testid="items-container"] > div:nth-child(6n + 4) > .card { --strip: var(--ps4); background-color: var(--ps4-l) !important; }
[data-testid="items-container"] > div:nth-child(6n + 5) > .card { --strip: var(--ps5); background-color: var(--ps5-l) !important; }
[data-testid="items-container"] > div:nth-child(6n + 6) > .card { --strip: var(--ps6); background-color: var(--ps6-l) !important; }
/* dark-mode tints */
[data-mode="dark"] [data-testid="items-container"] > div:nth-child(6n + 1) > .card { background-color: var(--ps1-d) !important; }
[data-mode="dark"] [data-testid="items-container"] > div:nth-child(6n + 2) > .card { background-color: var(--ps2-d) !important; }
[data-mode="dark"] [data-testid="items-container"] > div:nth-child(6n + 3) > .card { background-color: var(--ps3-d) !important; }
[data-mode="dark"] [data-testid="items-container"] > div:nth-child(6n + 4) > .card { background-color: var(--ps4-d) !important; }
[data-mode="dark"] [data-testid="items-container"] > div:nth-child(6n + 5) > .card { background-color: var(--ps5-d) !important; }
[data-mode="dark"] [data-testid="items-container"] > div:nth-child(6n + 6) > .card { background-color: var(--ps6-d) !important; }

/* ============================================================================
   SECTION 3 — brand icon: swap the bundled "Wishlist Logo" img for a Tanabata
   tree (🎋). The logo is a build-hashed asset with no upload setting, so we hide
   the <img> and render the emoji in the brand link's ::before instead. The
   "Wishlist" wordmark text is a separate <span> and is left untouched.
   ============================================================================ */
img[alt="Wishlist Logo"] {
    display: none !important;
}
a[href="/"]:has(> img[alt="Wishlist Logo"])::before {
    content: "🎋";
    font-size: 1.9rem;
    line-height: 1;
}

/* ============================================================================
   SECTION 4 — brand wordmark: "Wishlist" -> "Paper Stars". The text is a literal
   <span class="... font-bold ..."> inside the brand link (no app-name setting),
   so we zero the original text and render the new name in ::after at the same
   sizes (text-2xl / md:text-3xl). Scoped to the brand link so no other "Wishlist"
   string on the site is touched.
   ============================================================================ */
a[href="/"] > span.font-bold {
    font-size: 0 !important;
    letter-spacing: 0 !important;
}
a[href="/"] > span.font-bold::after {
    content: "Paper Stars";
    font-size: 1.5rem; /* text-2xl */
}
@media (min-width: 768px) {
    a[href="/"] > span.font-bold::after {
        font-size: 1.875rem; /* md:text-3xl */
    }
}