/* ---------------------------------------------------------------------------
   Sonic Rendezvous — tenant theme
   ---------------------------------------------------------------------------
   Loaded after /css/app-theme.css, so everything here overrides the compiled
   daisyUI "sonic" theme block without a rebuild.

   Colour story, taken from sonicrendezvous.com:
     - the page is black
     - the chrome (nav, panels) is a muted slate blue
     - orange is the single accent: prices, actions, active state
     - artist names are a soft desaturated blue, titles are near-white
   --------------------------------------------------------------------------- */

:root {
  /* logo */
  --header-logo-image: url('/env/images/logo_sonic_redezvous.svg');
  --header-logo-width: 13vw;

  /* font sizes */
  --base-size: 16px;
  --type-scale: 1.2;
}

@font-face {
  font-family: "mexcellent";
  font-style: normal;
  font-weight: normal;
  src: url("/env/fonts/mexcellent/mexcellent_rg.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "noto_sans";
  font-style: normal;
  font-weight: 400;
  src: url("/env/fonts/noto_sans/NotoSans-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "noto_sans";
  font-style: normal;
  font-weight: 700;
  src: url("/env/fonts/noto_sans/NotoSans-Bold.ttf") format("truetype");
  font-display: swap;
}

[data-theme] body {
  background-image: none;
}

/* ─── Theme tokens ─────────────────────────────────────────────────────── */

:root:has(input.theme-controller[value=sonic]:checked),
[data-theme="sonic"] {
  color-scheme: dark;

  /* Base ramp: one cool-neutral hue (215) from page-black upward, so surfaces
     stack predictably. The old ramp mixed a saturated slate at 200 with grey
     at 300+, which made every elevated block read as a blue slab. */
  --color-base-100: #08090b;   /* page */
  --color-base-150: #101318;   /* cards, popovers */
  --color-base-200: #191d24;   /* elevated blocks, hero */
  --color-base-250: #222831;
  --color-base-300: #2c333d;   /* hairlines, borders */
  --color-base-400: #454e5b;
  --color-base-500: #6a7482;
  --color-base-600: #99a3b1;
  --color-base-content: #e9edf2;

  /* Brand slate — the header blue. Kept as its own token rather than folded
     into the base ramp, because it is chrome, not a surface level. */
  --color-sonic-slate: #3d5169;
  --color-sonic-slate-deep: #2e3e52;

  /* brand */
  --color-primary: #ee9022;                 /* sonic orange */
  --color-primary-content: #0a0a0a;
  --color-secondary: #8aa9cc;               /* artist / supporting blue */
  --color-secondary-content: #0a0a0a;
  --color-accent: var(--color-sonic-slate);
  --color-accent-content: #ffffff;
  --color-neutral: #2c333d;
  --color-neutral-content: #e9edf2;

  /* status */
  --color-info: #56b6e6;
  --color-info-content: #08090b;
  --color-success: #3fbf6a;
  --color-success-content: #08090b;
  --color-warning: #eba234;
  --color-warning-content: #08090b;
  --color-error: #e5484d;
  --color-error-content: #ffffff;

  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;

  /* Component Scoped Variables */
  --color-flux-nav-bg: var(--color-sonic-slate);
  --color-flux-nav-content: #ffffff;
  --color-flux-popover-bg: var(--color-base-150);
  --color-flux-popover-content: var(--color-base-content);
  --color-flux-login-bg: var(--color-base-200);
  --color-flux-login-content: var(--color-base-content);

  /* Variant Hooks */
  --flux-variant-primary-bg: var(--color-primary);
  --flux-variant-primary-content: var(--color-primary-content);
  --flux-variant-secondary-bg: var(--color-sonic-slate);
  --flux-variant-secondary-content: #ffffff;
  --flux-variant-neutral-bg: var(--color-base-200);
  --flux-variant-neutral-content: var(--color-base-content);
  --flux-variant-elevated-bg: var(--color-base-200);
  --flux-variant-elevated-content: var(--color-base-content);

  /* fonts */
  --default-font-family: "noto_sans", ui-sans-serif, system-ui, sans-serif;
}

[data-theme="sonic"] body {
  background-color: var(--color-base-100);
  font-family: var(--default-font-family);
}

/* ─── Navbar ───────────────────────────────────────────────────────────── */

[data-theme="sonic"] .main-nav-bar {
  background-color: var(--color-flux-nav-bg) !important;
  color: var(--color-flux-nav-content) !important;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.45);
}

/* Nav links sit on slate, so they are white and only pick up orange on
   hover/active. app-theme.css draws the active underline in --color-primary. */
[data-theme="sonic"] .main-nav-bar .menu :where(li > a, li > button, li > span) {
  color: var(--color-flux-nav-content);
  font-weight: 600;
}

[data-theme="sonic"] .main-nav-bar .menu li > a.nav-item-link:hover,
[data-theme="sonic"] .main-nav-bar .menu li > a.nav-item-link:focus {
  color: var(--color-primary) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="sonic"] .main-nav-bar .menu li > a.nav-item-link.active {
  color: #ffffff !important;
  background-color: var(--color-sonic-slate-deep) !important;
}

[data-theme="sonic"] .main-nav-bar a.font-semibold:not(.active) {
  color: var(--color-flux-nav-content) !important;
}

/* Icon buttons (user, cart, hamburger) on the slate bar */
[data-theme="sonic"] .main-nav-bar .btn-ghost {
  color: var(--color-flux-nav-content);
}
[data-theme="sonic"] .main-nav-bar .btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Search field: a translucent well on the slate bar rather than a black hole */
[data-theme="sonic"] .main-nav-bar .input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
[data-theme="sonic"] .main-nav-bar .input:focus-within {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: var(--color-primary);
  outline: none;
}
[data-theme="sonic"] .main-nav-bar .input input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme="sonic"] .main-nav-bar .input .fa-search {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ─── Typography ───────────────────────────────────────────────────────── */

[data-theme="sonic"] h1,
[data-theme="sonic"] h2,
[data-theme="sonic"] h3,
[data-theme="sonic"] h4,
[data-theme="sonic"] h5,
[data-theme="sonic"] h6 {
  color: var(--color-base-content);
  letter-spacing: -0.01em;
}

/* Section headings carry the hairline rule the live site uses under
   "Upcoming Priorities" / "Current Bestsellers".

   The rule goes on .pageheader (the full-width flex row holding the title and
   any "Show more" action), not on the title itself — the title is only as wide
   as its text, so the border would stop mid-container. Guarded with :has()
   because carousels emit a second, title-less .pageheader which would
   otherwise draw a stray rule just below the first. */
[data-theme="sonic"] .pageheader:has(.pageheader__title) {
  border-bottom: 1px solid var(--color-base-300);
  padding-bottom: 0.625rem;
  margin-bottom: 1.25rem;
}

/* Several CMS blocks and shop partials hardcode Tailwind's light-theme greys
   (text-gray-500/600). Those land at ~35% contrast on a black page, so remap
   them to the base ramp instead of editing every block. */
[data-theme="sonic"] .text-gray-500 {
  color: var(--color-base-500) !important;
}
[data-theme="sonic"] .text-gray-600 {
  color: var(--color-base-600) !important;
}

/* Prose links stay orange; see the card block below for why this is scoped. */
[data-theme="sonic"] a {
  color: var(--color-primary);
}

/* ─── Product cards ────────────────────────────────────────────────────── */

/* The card title is an <h4> wrapped in an <a>, so the blanket link rule above
   painted every title orange and flattened the hierarchy. Restore the live
   site's split: near-white title, soft blue artist, orange reserved for price
   and actions.

   Scoped to .product-card (the grid tile) rather than .flux-card, because the
   product-detail panel is a .flux-card too and its artist/label/genre links
   must stay orange. */
[data-theme="sonic"] .product-card a {
  color: inherit;
}

[data-theme="sonic"] .product-card h4 {
  color: var(--color-base-content);
}

[data-theme="sonic"] .product-card a:hover h4 {
  color: var(--color-primary);
}

/* Artist line — the /55 opacity utility is too dim once the card lifts off
   black, and the live site tints it blue. */
[data-theme="sonic"] .product-card .card-body > div > div.text-base-content\/55 {
  color: var(--color-secondary) !important;
}

/* Cards need a visible edge: #101318 on #08090b alone is not enough
   separation at small sizes. */
[data-theme="sonic"] .flux-card {
  background-color: var(--color-base-150);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  overflow: hidden;
}

[data-theme="sonic"] .flux-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

[data-theme="sonic"] .product-card .meta-row {
  border-top-color: var(--color-base-300) !important;
}

[data-theme="sonic"] .format-badge {
  background-color: var(--color-base-250);
  color: var(--color-base-600);
  border: 1px solid var(--color-base-300);
}

[data-theme="sonic"] .status-badge--expected {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  font-weight: 700;
}

/* Keep the price / login affordance orange inside the card. */
[data-theme="sonic"] .product-card .text-primary,
[data-theme="sonic"] .product-card .price {
  color: var(--color-primary) !important;
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */

[data-theme="sonic"] .btn {
  border-color: transparent;
  font-weight: 600;
}

[data-theme="sonic"] .btn-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="sonic"] .btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-primary) 85%, #ffffff) !important;
}

[data-theme="sonic"] .btn-soft.btn-primary {
  background-color: color-mix(in srgb, var(--color-primary), transparent 85%) !important;
  color: var(--color-primary) !important;
}

[data-theme="sonic"] .btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ─── Surfaces ─────────────────────────────────────────────────────────── */

/* CMS content blocks: the elevated variant is a dark neutral panel with a
   hairline, matching the "Business customers / Private customers" panels. */
[data-theme="sonic"] .flux-variant-elevated,
[data-theme="sonic"] .flux-variant-neutral {
  border: 1px solid var(--color-base-300);
}

[data-theme="sonic"] .nav-popover {
  background-color: var(--color-flux-popover-bg);
  color: var(--color-flux-popover-content);
  border: 1px solid var(--color-base-300);
}

/* Base utility classes referenced by shop markup but not emitted by daisyUI */
[data-theme="sonic"] .bg-base-400 { background-color: var(--color-base-400); }
[data-theme="sonic"] .bg-base-500 { background-color: var(--color-base-500); }
[data-theme="sonic"] .bg-base-600 { background-color: var(--color-base-600); }
[data-theme="sonic"] .hover\:bg-base-300:hover { background-color: var(--color-base-300); }
[data-theme="sonic"] .divide-base-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-base-300);
}

/* ─── Forms & tables ───────────────────────────────────────────────────── */

[data-theme="sonic"] .input,
[data-theme="sonic"] .select,
[data-theme="sonic"] .textarea {
  background-color: var(--color-base-150);
  border-color: var(--color-base-300);
  color: var(--color-base-content);
}

[data-theme="sonic"] .input:focus,
[data-theme="sonic"] .select:focus,
[data-theme="sonic"] .textarea:focus {
  border-color: var(--color-primary);
  outline: 2px solid color-mix(in srgb, var(--color-primary), transparent 70%);
  outline-offset: 1px;
}

/* The shared login/account templates hardcode `text-primary` on every field
   label. Tinting every label with the brand accent drains it of meaning — the
   submit button should be the only orange thing in the form. Overridden here
   rather than in the blade, which is shared with the other tenants. */
[data-theme="sonic"] .login-menu-form .label.text-primary,
[data-theme="sonic"] .login-menu-form .label.text-primary .label-text {
  color: color-mix(in srgb, var(--color-base-content) 75%, transparent);
}

[data-theme="sonic"] .table th {
  color: var(--color-base-600);
}

[data-theme="sonic"] .table :where(thead tr, tbody tr:not(:last-child)) {
  border-color: var(--color-base-300);
}

/* ─── Tenant visibility ────────────────────────────────────────────────── */

/* sonicrendezvous and sugarandspice share one database, so CMS blocks such as
   the footer carry both tenants' variants (e.g. B2B and B2C newsletter forms)
   and pick one with these classes. The pre-daisyUI theme defined them; keep
   them here or both variants render. */
.sugarandspice .hide-sugar,
.sugarandspice .show-sonic,
.sonicrendezvous .hide-sonic,
.sonicrendezvous .show-sugar {
  display: none !important;
}

/* Homepage intro cards: only for visitors who are not logged in */
.user-logged-in .show-user-not-logged-in { display: none; }

/* ─── Footer ───────────────────────────────────────────────────────────── */

/* The CMS footer (block 5) is shared by both shops. On the live site its panel
   and bottom bar are the same dark grey, not a theme surface colour. */
[data-theme="sonic"] {
  --color-sonic-footer: #1e2124;
}

[data-theme="sonic"] .sonic-footer__panel,
[data-theme="sonic"] .sonic-footer__bar {
  background-color: var(--color-sonic-footer) !important;
}

[data-theme="sonic"] .sonic-footer__bar {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* Footer links are white on both shops (the general link rule paints them orange);
   orange is kept for hover, like the nav bar. */
[data-theme="sonic"] :where(.sonic-footer__panel, .sonic-footer__bar) a {
  color: #ffffff !important;
}
[data-theme="sonic"] :where(.sonic-footer__panel, .sonic-footer__bar) a:hover {
  color: var(--color-primary) !important;
}