/*
 * Reasoned shared theme tokens.
 * CentralHost is the source of truth for cross-site colour, radius, shadow,
 * and account/auth aliases. Product sites should import this SCSS at source
 * time and ship a generated local CSS copy until the static pipeline
 * compiles shared SCSS automatically.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;

  /* Canonical Reasoned dark palette (= brand.reasoned.default CMS pack). */
  --brand-color-primary: #00c281;
  --brand-color-primary-hover: #00a369;
  --brand-color-background: #0a0a0f;
  --brand-color-surface: #12121a;
  --brand-color-surface-elevated: #1a1a26;
  --brand-color-border: #2a2a3a;
  --brand-color-text-primary: #f0f0f5;
  --brand-color-text-secondary: #8888a8;
  --brand-color-text-muted: #5a6a65;
  --brand-color-accent-amber: #f59e0b;
  --brand-color-accent-rose: #f43f5e;
  --brand-color-accent-blue: #00a3ff;
  --brand-gradient-brand: linear-gradient(135deg, #00c281 0%, #00a3ff 100%);
  --brand-tier-gold: #ffd700;
  --brand-tier-silver: #c0c0c0;
  --brand-tier-bronze: #cd7f32;

  /* Product UI typography — Education/Recruitment Inter stack (not CMS Mohave/Bebas Neue). */
  --rt-font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reasoned-font-ui: var(--rt-font-ui);
  --reasoned-nav-font: var(--rt-font-ui);

  --rt-bg-page: var(--brand-color-background);
  --rt-bg-card: var(--brand-color-surface);
  --rt-bg-card-elevated: var(--brand-color-surface-elevated);
  --rt-bg-glass: rgba(26, 26, 38, 0.72);
  --rt-text-primary: var(--brand-color-text-primary);
  --rt-text-secondary: var(--brand-color-text-secondary);
  --rt-text-tertiary: var(--brand-color-text-muted);
  --rt-border: var(--brand-color-border);
  --rt-border-strong: rgba(0, 194, 129, 0.4);
  --rt-green: var(--brand-color-primary);
  --rt-green-dark: var(--brand-color-primary-hover);
  --rt-green-dim: rgba(0, 194, 129, 0.12);
  --rt-green-mid: rgba(0, 194, 129, 0.25);
  --rt-green-border: rgba(0, 194, 129, 0.4);
  --rt-red: var(--brand-color-accent-rose);
  --rt-warning: var(--brand-color-accent-amber);
  --rt-shadow-card: 0 0 25px rgba(0, 0, 0, 0.6);
  --rt-shadow-hover: 0 0 45px rgba(0, 194, 129, 0.45);
  --rt-radius-card: 12px;
  --rt-radius-button: 10px;
  --rt-radius-pill: 20px;
  --rt-transition: 0.3s ease;

  /* CentralHost/settings aliases. */
  --reasoned-bg: var(--rt-bg-page);
  --reasoned-bg-soft: var(--brand-color-background);
  --reasoned-surface: var(--rt-bg-card);
  --reasoned-surface-elevated: var(--rt-bg-card-elevated);
  --reasoned-surface-strong: var(--brand-color-surface-elevated);
  --reasoned-border: var(--rt-border);
  --reasoned-border-strong: var(--rt-green-border);
  --reasoned-text: var(--rt-text-primary);
  --reasoned-text-secondary: var(--rt-text-secondary);
  --reasoned-text-muted: rgba(154, 167, 163, 0.72);
  --reasoned-primary: var(--rt-green);
  --reasoned-primary-dark: var(--rt-green-dark);
  --reasoned-primary-soft: var(--rt-green-dim);
  --reasoned-primary-soft-strong: rgba(0, 194, 129, 0.18);
  --reasoned-danger: var(--rt-red);
  --reasoned-warning: var(--rt-warning);
  --reasoned-shadow-card: var(--rt-shadow-card);
  --reasoned-radius-card: var(--rt-radius-card);
  --reasoned-radius-control: var(--rt-radius-button);
  --reasoned-sidebar-width: clamp(240px, 20vw, 280px);
  --reasoned-topbar-height: 66px;
  --footer-bg: var(--brand-color-background);

  /* Landing/CMS compatibility aliases. */
  --acc: var(--rt-green);
  --red: var(--rt-red);
  --adim: var(--rt-green-dim);
  --aglow: rgba(0, 194, 129, 0.45);
  --color-bg: var(--rt-bg-page);
  --color-card: var(--rt-bg-card);
  --color-text: var(--rt-text-primary);
  --color-text-secondary: var(--rt-text-secondary);
  --color-border: var(--rt-border);
  --color-glass: rgba(255, 255, 255, 0.02);
  --color-accent: var(--rt-green);
  --shadow-card: var(--rt-shadow-card);
  --shadow-hover: var(--rt-shadow-hover);
  --shadow-accent: 0 0 10px rgba(0, 194, 129, 0.6);
  --radius-card: var(--rt-radius-card);
  --radius-button: var(--rt-radius-button);
  --transition-fast: var(--rt-transition);
  --transition-card: 0.35s ease;
}

/* Light mode — Recruit product shell palette (shared across Learn / Compete / Get Hired / Settings). */
html[data-theme="light"] {
  color-scheme: light;

  /* Brand tokens (overridden by brand.reasoned.default themes.light when pack loads). */
  --brand-color-background: #f4f4f8;
  --brand-color-surface: #ffffff;
  --brand-color-surface-elevated: #ffffff;
  --brand-color-border: #e4e4ec;
  --brand-color-text-primary: #0f0f1a;
  --brand-color-text-secondary: #5a5a7a;
  --brand-color-text-muted: #8a8aa0;

  --rt-bg-page: var(--brand-color-background);
  --rt-bg-card: var(--brand-color-surface);
  --rt-bg-card-elevated: var(--brand-color-surface-elevated);
  --rt-bg-glass: rgba(255, 255, 255, 0.85);
  --rt-text-primary: var(--brand-color-text-primary);
  --rt-text-secondary: var(--brand-color-text-secondary);
  --rt-text-tertiary: rgba(90, 90, 122, 0.72);
  --rt-border: var(--brand-color-border);
  --rt-border-strong: rgba(0, 194, 129, 0.35);
  --rt-green-dim: rgba(0, 194, 129, 0.08);
  --rt-green-mid: rgba(0, 194, 129, 0.15);
  --rt-green-border: rgba(0, 194, 129, 0.3);
  --rt-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --rt-shadow-hover: 0 8px 32px rgba(0, 194, 129, 0.18);

  --reasoned-bg: var(--rt-bg-page);
  --reasoned-bg-soft: #ececf2;
  --reasoned-surface: var(--rt-bg-card);
  --reasoned-surface-elevated: var(--rt-bg-card-elevated);
  --reasoned-surface-strong: #f8f8fb;
  --reasoned-border: var(--rt-border);
  --reasoned-border-strong: var(--rt-green-border);
  --reasoned-text: var(--rt-text-primary);
  --reasoned-text-secondary: var(--rt-text-secondary);
  --reasoned-text-muted: rgba(90, 90, 122, 0.6);
  --reasoned-shadow-card: var(--rt-shadow-card);
  --footer-bg: var(--rt-bg-page);

  --color-bg: var(--rt-bg-page);
  --color-card: var(--rt-bg-card);
  --color-text: var(--rt-text-primary);
  --color-text-secondary: var(--rt-text-secondary);
  --color-border: var(--rt-border);
  --color-glass: rgba(0, 0, 0, 0.02);
  --color-background: var(--rt-bg-page);
  --color-surface: var(--rt-bg-card);
  --color-surface-elevated: var(--rt-bg-card-elevated);
  --color-text-primary: var(--rt-text-primary);
  --color-text-muted: rgba(90, 90, 122, 0.6);
  --color-border-subtle: rgba(0, 0, 0, 0.05);
  --color-card-rgb: 255, 255, 255;
  --shadow-card: var(--rt-shadow-card);
  --shadow-hover: var(--rt-shadow-hover);

  --bg: var(--rt-bg-page);
  --card: var(--rt-bg-card);
  --surf: var(--rt-bg-card);
  --surf2: var(--rt-bg-card-elevated);
  --txt: var(--rt-text-primary);
  --txt2: var(--rt-text-secondary);
  --muted: var(--rt-text-tertiary);
  --border: var(--rt-border);

  --reasoned-nav-border: rgba(15, 15, 26, 0.12);
  --reasoned-nav-surface: rgba(15, 15, 26, 0.04);
  --reasoned-nav-text: #2a2a3a;
  --reasoned-nav-active-text: #001c13;
  --reasoned-nav-hover: rgba(0, 194, 129, 0.1);
  --reasoned-nav-accent-border: rgba(0, 194, 129, 0.45);
}

@supports (color: color-mix(in srgb, white, black)) {
  :root {
    --acc-mix-04: color-mix(in srgb, var(--acc) 4%, transparent);
    --acc-mix-07: color-mix(in srgb, var(--acc) 7%, transparent);
    --acc-mix-10: color-mix(in srgb, var(--acc) 10%, transparent);
    --acc-mix-12: color-mix(in srgb, var(--acc) 12%, transparent);
    --acc-mix-14: color-mix(in srgb, var(--acc) 14%, transparent);
    --acc-mix-25: color-mix(in srgb, var(--acc) 25%, transparent);
    --acc-mix-35: color-mix(in srgb, var(--acc) 35%, transparent);
    --acc-mix-40: color-mix(in srgb, var(--acc) 40%, transparent);
    --acc-mix-45: color-mix(in srgb, var(--acc) 45%, transparent);
    --acc-mix-65: color-mix(in srgb, var(--acc) 65%, transparent);
    --shadow-acc-soft: 0 0 22px color-mix(in srgb, var(--acc) 65%, transparent);
    --shadow-acc-glow: 0 0 20px color-mix(in srgb, var(--acc) 40%, transparent);
    --shadow-acc-num: 0 0 22px color-mix(in srgb, var(--acc) 35%, transparent);
  }
}

/*
 * Product chrome typography (Education source).
 * Shared sidebars and CentralHost Settings use Inter via --rt-font-ui.
 * Landing/CMS marketing type may still use --brand-font-* / --fb / --fd.
 */
.app-sidebar,
.app-sidebar button,
.app-sidebar a,
.app-sidebar input,
.education-left-sidebar,
.education-left-sidebar button,
.education-left-sidebar a,
.reasoned-button,
button.reasoned-button,
a.reasoned-button,
label.reasoned-button {
  font-family: var(--rt-font-ui);
}

/* CMS accent helpers shared by LandingSite/Page Builder. */
.cms-sec .tag,
.cms-dynamic-root .tag,
.page .tag {
  color: var(--acc) !important;
}

.cms-sec .tag::before,
.cms-dynamic-root .tag::before,
.page .tag::before {
  background: var(--acc) !important;
}

.cms-sec .tag *,
.cms-dynamic-root .tag *,
.page .tag * {
  color: inherit !important;
}

body.cms-admin-active .rt-cms-gap {
  border-color: var(--acc-mix-40, rgba(0, 194, 129, 0.4)) !important;
  background: var(--acc-mix-07, rgba(0, 194, 129, 0.07)) !important;
}

body.cms-admin-active .rt-cms-gap-static {
  background: var(--acc-mix-04, rgba(0, 194, 129, 0.04)) !important;
}

.rt-cms-add-btn {
  border-color: var(--acc-mix-45, rgba(0, 194, 129, 0.45)) !important;
  color: var(--acc) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}

.rt-cms-add-btn:hover {
  background: var(--acc-mix-14, rgba(0, 194, 129, 0.14)) !important;
  border-color: var(--acc) !important;
  color: var(--acc) !important;
}