@import url('./design-system.css');

/* Subtle market identity layer.
   Structure stays identical; only the ambient palette shifts by market.
   Otome = rose / lilac warmth. BL = aqua / indigo coolness.
   Male = green / chartreuse with a warm yellow signal accent.
   Search keeps its own edge palette, sourced from the same shared tokens. */

/* ---------- Home: OTOME ---------- */
body[data-market="otome"]{
  --accent:var(--ms-market-accent);
  --accent-2:var(--ms-market-accent-2);
  --accent-dark:var(--ms-market-accent-dark);
  --accent-soft:var(--ms-market-accent-soft);
  --accent-pale:var(--ms-market-accent-pale);
  --signal:var(--ms-market-signal);
  --signal-soft:var(--ms-market-signal-soft);
  background:
    radial-gradient(circle at 7% 0%,rgba(233,111,159,.13),transparent 29%),
    radial-gradient(circle at 96% 8%,rgba(169,134,229,.09),transparent 27%),
    radial-gradient(circle at 72% 50%,rgba(246,213,227,.18),transparent 28%),
    linear-gradient(180deg,#fcfbfc 0%,#f7f6f9 52%,#fcfbfc 100%);
}
body[data-market="otome"] .home-ranking-section .hero{
  border-left-color:#df7da6!important;
}
body[data-market="otome"] .view-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;
  box-shadow:0 7px 18px rgba(191,93,146,.17)!important;
}
body[data-market="otome"] .mini-segment.active,
body[data-market="otome"] .period-button.active{
  color:var(--accent-dark);
}

/* ---------- Home: BL ---------- */
body[data-market="bl"]{
  --accent:var(--ms-market-accent);
  --accent-2:var(--ms-market-accent-2);
  --accent-dark:var(--ms-market-accent-dark);
  --accent-soft:var(--ms-market-accent-soft);
  --accent-pale:var(--ms-market-accent-pale);
  --signal:var(--ms-market-signal);
  --signal-soft:var(--ms-market-signal-soft);
  background:
    radial-gradient(circle at 7% 0%,rgba(89,196,200,.13),transparent 29%),
    radial-gradient(circle at 96% 8%,rgba(137,133,217,.11),transparent 28%),
    radial-gradient(circle at 72% 50%,rgba(202,225,241,.18),transparent 28%),
    linear-gradient(180deg,#fafcfd 0%,#f3f7fa 52%,#fafcfd 100%);
}
body[data-market="bl"] .card{
  background:rgba(251,253,255,.80);
}
body[data-market="bl"] .home-ranking-section .hero{
  border-left-color:var(--signal)!important;
}
body[data-market="bl"] .view-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;
  box-shadow:0 7px 18px rgba(91,127,175,.16)!important;
}
body[data-market="bl"] .mini-segment.active,
body[data-market="bl"] .period-button.active{
  color:var(--accent-dark);
}

/* ---------- Home: MALE ---------- */
body[data-market="male"]{
  --accent:var(--ms-market-accent);
  --accent-2:var(--ms-market-accent-2);
  --accent-dark:var(--ms-market-accent-dark);
  --accent-soft:var(--ms-market-accent-soft);
  --accent-pale:var(--ms-market-accent-pale);
  --signal:var(--ms-market-signal);
  --signal-soft:var(--ms-market-signal-soft);
  background:
    radial-gradient(circle at 7% 0%,rgba(104,182,111,.13),transparent 29%),
    radial-gradient(circle at 96% 8%,rgba(181,200,79,.11),transparent 28%),
    radial-gradient(circle at 72% 50%,rgba(220,239,220,.19),transparent 28%),
    linear-gradient(180deg,#fbfcf8 0%,#f4f8f0 52%,#fbfcf8 100%);
}
body[data-market="male"] .card{
  background:rgba(252,254,249,.82);
}
body[data-market="male"] .home-ranking-section .hero{
  border-left-color:var(--accent)!important;
}
body[data-market="male"] .view-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;
  box-shadow:0 7px 18px rgba(76,133,83,.16)!important;
}
body[data-market="male"] .mini-segment.active,
body[data-market="male"] .period-button.active{
  color:var(--accent-dark);
}

/* ---------- Analysis / catalog ---------- */
body[data-market="otome"] .longterm-shell,
body[data-market="otome"] .all-shell,
body[data-market="bl"] .longterm-shell,
body[data-market="bl"] .all-shell,
body[data-market="male"] .longterm-shell,
body[data-market="male"] .all-shell{
  --accent:var(--ms-market-accent);
  --accent-2:var(--ms-market-accent-2);
  --accent-dark:var(--ms-market-accent-dark);
  --accent-soft:var(--ms-market-accent-soft);
  --accent-pale:var(--ms-market-accent-pale);
  --signal:var(--ms-market-signal);
  --signal-soft:var(--ms-market-signal-soft);
}

body[data-market="otome"] .longterm-shell::before,
body[data-market="otome"] .all-shell::before{
  background:
    radial-gradient(circle at 8% 0%,rgba(233,111,159,.12),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(169,134,229,.075),transparent 27%),
    radial-gradient(circle at 77% 45%,rgba(246,213,227,.13),transparent 25%),
    linear-gradient(180deg,#fcfbfc 0%,#f6f5f8 50%,#fcfbfc 100%);
}
body[data-market="otome"] .longterm-shell .longterm-hero{
  border-color:rgba(233,111,159,.12);
  background:
    radial-gradient(circle at 96% 4%,rgba(233,111,159,.085),transparent 28%),
    radial-gradient(circle at 82% 0%,rgba(169,134,229,.075),transparent 27%),
    rgba(255,255,255,.91);
}

body[data-market="bl"] .longterm-shell::before,
body[data-market="bl"] .all-shell::before{
  background:
    radial-gradient(circle at 8% 0%,rgba(89,196,200,.12),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(137,133,217,.10),transparent 28%),
    radial-gradient(circle at 77% 45%,rgba(199,224,240,.13),transparent 25%),
    linear-gradient(180deg,#fafcfd 0%,#f2f6f9 50%,#fafcfd 100%);
}
body[data-market="bl"] .longterm-shell .card,
body[data-market="bl"] .all-shell .card{
  background:rgba(251,253,255,.83);
}
body[data-market="bl"] .longterm-shell .longterm-hero{
  border-color:rgba(89,196,200,.15);
  background:
    radial-gradient(circle at 96% 4%,rgba(89,196,200,.10),transparent 28%),
    radial-gradient(circle at 82% 0%,rgba(137,133,217,.09),transparent 27%),
    rgba(251,253,255,.92);
}
body[data-market="bl"] .all-shell .all-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 16px rgba(91,127,175,.15);
}
body[data-market="bl"] .all-shell #allScopeToggle{
  border-color:rgba(89,196,200,.22);
  background:var(--signal-soft);
  color:#367f84;
}

body[data-market="male"] .longterm-shell::before,
body[data-market="male"] .all-shell::before{
  background:
    radial-gradient(circle at 8% 0%,rgba(104,182,111,.12),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(181,200,79,.10),transparent 28%),
    radial-gradient(circle at 77% 45%,rgba(220,239,220,.14),transparent 25%),
    linear-gradient(180deg,#fbfcf8 0%,#f3f7ef 50%,#fbfcf8 100%);
}
body[data-market="male"] .longterm-shell .card,
body[data-market="male"] .all-shell .card{
  background:rgba(252,254,249,.84);
}
body[data-market="male"] .longterm-shell .longterm-hero{
  border-color:rgba(104,182,111,.15);
  background:
    radial-gradient(circle at 96% 4%,rgba(104,182,111,.10),transparent 28%),
    radial-gradient(circle at 82% 0%,rgba(181,200,79,.09),transparent 27%),
    rgba(252,254,249,.92);
}
body[data-market="male"] .all-shell .all-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 16px rgba(76,133,83,.15);
}
body[data-market="male"] .all-shell #allScopeToggle{
  border-color:rgba(104,182,111,.22);
  background:var(--signal-soft);
  color:#6f6d28;
}

/* Market identity should stay subtle on small screens too. */
@supports(-webkit-touch-callout:none){
  body[data-market="otome"]{background-color:#f8f5f8!important}
  body[data-market="bl"]{background-color:#f3f7fa!important}
  body[data-market="male"]{background-color:#f4f8f0!important}
}