/* CL_DESIGN_CORE_V1
   CryptoLookout shared design core.
   Purpose: one future design layer for /, /live-signals, /app, /compte.
   S53 only installs tokens + safe base classes. It must not visually override old pages yet.
*/

:root {
  --cl-core-bg-light: #f6faff;
  --cl-core-surface-light: #ffffff;
  --cl-core-text-light: #071a36;
  --cl-core-muted-light: #526781;
  --cl-core-border-light: #b9d8ff;

  --cl-core-bg-dark: #061426;
  --cl-core-surface-dark: #0b223f;
  --cl-core-text-dark: #f7fbff;
  --cl-core-muted-dark: #b7c7df;
  --cl-core-border-dark: #1f4b80;

  --cl-core-blue: #0b2f68;
  --cl-core-blue-2: #2f8cff;
  --cl-core-radius: 22px;
  --cl-core-page-max: 1180px;
}

/* Inert unless a page explicitly opts in with data-cl-design-core="v1". */
:where([data-cl-design-core="v1"]) {
  color-scheme: light;
}

html[data-theme="dark"] :where([data-cl-design-core="v1"]) {
  color-scheme: dark;
}

:where([data-cl-design-core="v1"]) :where(.cl-core-page) {
  width: min(var(--cl-core-page-max), calc(100% - 32px));
  margin-inline: auto;
}

:where([data-cl-design-core="v1"]) :where(.cl-core-card) {
  border-radius: var(--cl-core-radius);
  border: 1px solid var(--cl-core-border-light);
  background: var(--cl-core-surface-light);
  color: var(--cl-core-text-light);
}

html[data-theme="dark"] :where([data-cl-design-core="v1"]) :where(.cl-core-card) {
  border-color: var(--cl-core-border-dark);
  background: var(--cl-core-surface-dark);
  color: var(--cl-core-text-dark);
}

:where([data-cl-design-core="v1"]) :where(.cl-core-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--cl-core-border-light);
  background: #ffffff;
  color: var(--cl-core-blue);
  font-weight: 800;
  text-decoration: none;
}

:where([data-cl-design-core="v1"]) :where(.cl-core-btn-primary) {
  background: linear-gradient(180deg, var(--cl-core-blue-2), var(--cl-core-blue));
  color: #ffffff;
  border-color: var(--cl-core-blue);
}

/* CL_DESIGN_CORE_HOME_BACKGROUND_FIX_S70
   /home currently loads this file.
   Purpose: prevent old dark html/body backgrounds from bleeding as a black strip
   and make the whole viewport follow the selected theme.
*/
html[data-theme="light"],
html[data-theme="light"] body {
  background: #f6faff !important;
  color-scheme: light;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #061426 !important;
  color-scheme: dark;
}

/* Keep the browser overscroll / viewport edge consistent with the page theme. */
html[data-theme="light"] {
  background-color: #f6faff !important;
}

html[data-theme="dark"] {
  background-color: #061426 !important;
}

/* CL_DESIGN_CORE_SHELL_CONTRACT_S75
   Shared shell contract for future adoption on /, /live-signals/, /app/, /compte/.
   This block is intentionally opt-in through classes/data attributes.
   It must not force old pages globally.
*/
:root {
  --cl-core-page-max: 1180px;
  --cl-core-page-pad-x: 32px;
  --cl-core-top-gap: 22px;
  --cl-core-section-gap: 26px;
  --cl-core-hero-gap: 22px;
  --cl-core-card-radius: 24px;
  --cl-core-hero-radius: 28px;
  --cl-core-title-max: 4.15rem;
  --cl-core-title-min: 2.15rem;
  --cl-core-copy-max: 1.08rem;
}

:where([data-cl-design-core="v1"]) :where(.cl-core-page) {
  width: min(var(--cl-core-page-max), calc(100% - (var(--cl-core-page-pad-x) * 2)));
  margin-inline: auto;
  padding-block: var(--cl-core-top-gap) 56px;
}

:where([data-cl-design-core="v1"]) :where(.cl-core-hero) {
  margin-top: 0;
  margin-bottom: var(--cl-core-section-gap);
}

:where([data-cl-design-core="v1"]) :where(.cl-core-hero-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  gap: var(--cl-core-hero-gap);
  align-items: stretch;
}

:where([data-cl-design-core="v1"]) :where(.cl-core-title) {
  font-size: clamp(var(--cl-core-title-min), 4.6vw, var(--cl-core-title-max));
  line-height: .98;
  letter-spacing: -.055em;
}

:where([data-cl-design-core="v1"]) :where(.cl-core-copy) {
  font-size: clamp(.98rem, 1.25vw, var(--cl-core-copy-max));
  line-height: 1.6;
}

:where([data-cl-design-core="v1"]) :where(.cl-core-card),
:where([data-cl-design-core="v1"]) :where(.cl-core-panel) {
  border-radius: var(--cl-core-card-radius);
}

:where([data-cl-design-core="v1"]) :where(.cl-core-hero-card) {
  border-radius: var(--cl-core-hero-radius);
}

@media (max-width: 860px) {
  :root {
    --cl-core-page-pad-x: 18px;
    --cl-core-top-gap: 18px;
    --cl-core-section-gap: 22px;
    --cl-core-title-max: 3.25rem;
    --cl-core-title-min: 2rem;
  }

  :where([data-cl-design-core="v1"]) :where(.cl-core-hero-grid) {
    grid-template-columns: 1fr;
  }
}

/* CL_DESIGN_CORE_SHARED_SHELL_VISIBLE_S83
   Replaces S82. One shared visible shell block, no stacked patch.
   Applies only to pages with body[data-cl-design-core="v1"].
*/
body[data-cl-design-core="v1"] {
  --cl-shell-max: 1180px;
  --cl-shell-side: 32px;
  --cl-shell-gap-top: 24px;
  --cl-shell-gap-section: 28px;
  --cl-h1-max: 4.05rem;
  --cl-h1-live-max: 4.35rem;
  --cl-card-radius: 24px;
}

/* Common page width and rhythm */
body[data-cl-design-core="v1"] main,
body[data-cl-design-core="v1"] .container,
body[data-cl-design-core="v1"] .page,
body[data-cl-design-core="v1"] .page-shell,
body[data-cl-design-core="v1"] .app-shell,
body[data-cl-design-core="v1"] .account-shell {
  width: min(var(--cl-shell-max), calc(100% - (var(--cl-shell-side) * 2))) !important;
  max-width: var(--cl-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Topbar to first content: same visual rhythm */
body[data-cl-design-core="v1"] main {
  margin-top: var(--cl-shell-gap-top) !important;
}

/* Avoid pages starting glued to the nav */
body[data-cl-design-core="v1"] .hero,
body[data-cl-design-core="v1"] .account-hero,
body[data-cl-design-core="v1"] .app-hero,
body[data-cl-design-core="v1"] .live-hero {
  margin-top: 0 !important;
}

/* Slight global type reduction without crushing hierarchy */
body[data-cl-design-core="v1"] h1 {
  font-size: clamp(2.45rem, 4.7vw, var(--cl-h1-max)) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

/* Live keeps a bit more impact, but less aggressive than before */
body[data-cl-design-core="v1"] .live-hero h1,
body[data-cl-design-core="v1"] [class*="live"] h1 {
  font-size: clamp(2.55rem, 5vw, var(--cl-h1-live-max)) !important;
}

/* Shared card language */
body[data-cl-design-core="v1"] section,
body[data-cl-design-core="v1"] .card,
body[data-cl-design-core="v1"] .panel,
body[data-cl-design-core="v1"] [class*="card"],
body[data-cl-design-core="v1"] [class*="panel"] {
  border-radius: var(--cl-card-radius);
}

/* Dark alert/account cards should not remain grey-white */
html[data-theme="dark"] body[data-cl-design-core="v1"] [class*="alert"],
html[data-theme="dark"] body[data-cl-design-core="v1"] [class*="account"],
html[data-theme="dark"] body[data-cl-design-core="v1"] [class*="card"] {
  border-color: rgba(130, 170, 220, .18);
}

/* Prevent preset badges from sitting in the middle of text where possible */
body[data-cl-design-core="v1"] [class*="selected"],
body[data-cl-design-core="v1"] [class*="active"] {
  align-self: flex-start;
}


@media (max-width: 860px) {
  body[data-cl-design-core="v1"] {
    --cl-shell-side: 18px;
    --cl-shell-gap-top: 18px;
    --cl-h1-max: 3.15rem;
    --cl-h1-live-max: 3.25rem;
  }
}

/* CL_SITE_TYPOGRAPHY_SCALE_S154
   Shared typography scale after width contract validation.
   Goal: slightly calmer, more commercial, less oversized text.
*/
body[data-cl-design-core="v1"] {
  font-size: 15.5px;
}

body[data-cl-design-core="v1"] h1 {
  font-size: clamp(2.25rem, 4.35vw, 3.95rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.052em !important;
}

body[data-cl-design-core="v1"] h2 {
  font-size: clamp(1.45rem, 2.35vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

body[data-cl-design-core="v1"] h3 {
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.18;
}

body[data-cl-design-core="v1"] p,
body[data-cl-design-core="v1"] li,
body[data-cl-design-core="v1"] label,
body[data-cl-design-core="v1"] input,
body[data-cl-design-core="v1"] select,
body[data-cl-design-core="v1"] button {
  font-size: 0.96rem;
}

body[data-cl-design-core="v1"] .cl-public-nav-link,
body[data-cl-design-core="v1"] .cl-public-nav-button {
  font-size: 12.5px !important;
}

/* Keep /live a little more expressive, but not oversized. */
body[data-cl-design-core="v1"] .live-hero h1,
body[data-cl-design-core="v1"] [class*="live"] h1 {
  font-size: clamp(2.35rem, 4.6vw, 4.1rem) !important;
}

@media (max-width: 860px) {
  body[data-cl-design-core="v1"] h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
}
/* /CL_SITE_TYPOGRAPHY_SCALE_S154 */