/* assets/css/lj-components.css
   Shared design-token foundation for all LetzJam skins.
   Add new skins by overriding these variables in a skin file or via [data-theme-style="..."].
*/

:root {
  color-scheme: light;

  /* Brand + semantic colors */
  --lj-primary: var(--primary, var(--theme-primary, var(--bs-primary, #0d6efd)));
  --lj-primary-rgb: var(--primary-rgb, 13, 110, 253);
  --lj-on-primary: var(--primaryText, #ffffff);

  --lj-bg: var(--bs-body-bg, #f6f7fb);
  --lj-surface: var(--surface, var(--card-bg, rgba(255, 255, 255, 0.88)));
  --lj-surface-2: var(--surface2, rgba(255, 255, 255, 0.65));
  --lj-surface2: var(--lj-surface-2);

  --lj-text: var(--text, var(--theme-text, var(--bs-body-color, #111827)));
  --lj-muted: var(--muted, rgba(17, 24, 39, 0.62));
  --lj-border: var(--border, rgba(15, 23, 42, 0.12));
  --lj-surface-soft: color-mix(in srgb, var(--lj-surface) 70%, var(--lj-bg) 30%);

  --lj-success: #22c55e;
  --lj-danger: #ef4444;
  --lj-warning: #f59e0b;
  --lj-info: #06b6d4;

  --lj-success-rgb: 34, 197, 94;
  --lj-danger-rgb: 239, 68, 68;
  --lj-warning-rgb: 245, 158, 11;
  --lj-info-rgb: 6, 182, 212;

  /* Motion + shape */
  --lj-radius: 16px;
  --lj-radius-lg: max(0px, calc(var(--lj-radius) + 6px));
  --lj-radius-sm: max(0px, calc(var(--lj-radius) - 6px));
  --lj-shadow-sm: 0 8px 24px rgba(2, 6, 23, 0.08);
  --lj-shadow-md: 0 16px 44px rgba(2, 6, 23, 0.12);
  --lj-shadow-lg: 0 28px 72px rgba(2, 6, 23, 0.16);
  --lj-transition-fast: 160ms ease;

  /* Typography hooks */
  --lj-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --lj-font-family: var(--lj-font);
  --lj-font-size: 16px;
}

html,
body {
  color: var(--lj-text);
  background: var(--lj-bg);
  font-family: var(--lj-font-family, var(--lj-font));
  font-size: var(--lj-font-size);
}

html[data-theme="dark"],
html[data-bs-theme="dark"],
body[data-theme="dark"],
body[data-bs-theme="dark"],
.theme-dark,
.lj-dark {
  color-scheme: dark;
  --lj-bg: #141821;
  --lj-surface: #1e2430;
  --lj-surface-2: #2a3445;
  --lj-surface2: var(--lj-surface-2);
  --lj-text: rgba(255, 255, 255, 0.92);
  --lj-muted: rgba(255, 255, 255, 0.66);
  --lj-border: rgba(255, 255, 255, 0.16);
  --lj-surface-soft: color-mix(in srgb, var(--lj-surface) 78%, var(--lj-bg) 22%);
}

html[data-theme="light"],
html[data-bs-theme="light"],
.theme-light,
.lj-light {
  color-scheme: light;
}

/* Radius controls from runtime/customizer */
html.lj-radius-rounded,
html[data-radius="rounded"] {
  --lj-radius: 18px;
}

html.lj-radius-standard,
html[data-radius="standard"] {
  --lj-radius: 12px;
}

html.lj-radius-flat,
html[data-radius="flat"] {
  --lj-radius: 0px;
}

/* Optional skin-specific hooks */
html[data-theme-style="default"] {
  --lj-skin-glass: rgba(255, 255, 255, 0.5);
}
html[data-theme-style="kawaii"] {
  --lj-skin-glass: rgba(255, 240, 250, 0.55);
}
html[data-theme-style="transformers"] {
  --lj-skin-glass: rgba(14, 20, 30, 0.62);
}
html[data-theme-style="whimsical"] {
  --lj-skin-glass: rgba(255, 235, 250, 0.58);
}
html[data-theme-style="ocean"] {
  --lj-skin-glass: rgba(224, 242, 254, 0.58);
}
html[data-theme-style="retro"] {
  --lj-skin-glass: rgba(20, 10, 0, 0.72);
}
html[data-theme-style="cyberpunk"] {
  --lj-skin-glass: rgba(5, 0, 20, 0.78);
}

/* Reusable themed primitives */
.lj-surface {
  background: var(--lj-surface) !important;
  color: var(--lj-text) !important;
  border: 1px solid var(--lj-border) !important;
}

.lj-surface-soft {
  background: var(--lj-surface-2) !important;
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent) !important;
}

.lj-glass {
  background: color-mix(in srgb, var(--lj-surface) 70%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--lj-border) 65%, transparent) !important;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.lj-card-base {
  border-radius: var(--lj-radius-lg) !important;
  box-shadow: var(--lj-shadow-md);
}

.lj-interactive {
  transition:
    transform var(--lj-transition-fast),
    box-shadow var(--lj-transition-fast),
    border-color var(--lj-transition-fast),
    background-color var(--lj-transition-fast);
}

.lj-interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--lj-shadow-lg);
}

.lj-token-text-muted { color: var(--lj-muted) !important; }
.lj-token-border { border-color: var(--lj-border) !important; }
.lj-token-primary { color: var(--lj-primary) !important; }
.lj-token-bg { background: var(--lj-bg) !important; }

/* ── SVG icon system ── */
.lj-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;   /* matches Bootstrap Icons font baseline */
  fill: currentColor;
  flex-shrink: 0;
}

/* size modifiers */
.lj-icon--xs  { width: 0.75em;  height: 0.75em; }
.lj-icon--sm  { width: 0.875em; height: 0.875em; }
.lj-icon--md  { width: 1.25em;  height: 1.25em; }
.lj-icon--lg  { width: 1.5em;   height: 1.5em;  vertical-align: -0.2em; }
.lj-icon--xl  { width: 2em;     height: 2em;    vertical-align: -0.3em; }
.lj-icon--2x  { width: 2em;     height: 2em; }
.lj-icon--3x  { width: 3em;     height: 3em; }

/* Token map for embedded UI blocks */
:root {
  --f-primary: var(--lj-primary, #0d6efd);
  --f-primary-rgb: var(--lj-primary-rgb, 13, 110, 253);
  --f-on-primary: var(--lj-on-primary, #ffffff);
  --f-text: var(--lj-text, #111827);
  --f-muted: var(--lj-muted, rgba(17, 24, 39, 0.62));
  --f-border: var(--lj-border, rgba(15, 23, 42, 0.12));
  --f-surface: var(--lj-surface, #ffffff);
  --f-surface2: var(--lj-surface-2, #f7f8fa);
  --f-success: var(--lj-success, #22c55e);
  --f-danger: var(--lj-danger, #ef4444);
  --f-warning: var(--lj-warning, #f59e0b);
  --f-info: var(--lj-info, #06b6d4);
  --f-success-rgb: var(--lj-success-rgb, 34, 197, 94);
  --f-danger-rgb: var(--lj-danger-rgb, 239, 68, 68);
  --f-warning-rgb: var(--lj-warning-rgb, 245, 158, 11);
  --f-info-rgb: var(--lj-info-rgb, 6, 182, 212);
  --f-radius: var(--lj-radius, 16px);
  --f-radius-lg: var(--lj-radius-lg, 22px);
  --f-radius-sm: var(--lj-radius-sm, 10px);
}