@import url("/css/theme-switch.css");

@layer base {
  :root {
    color-scheme: light dark;

    --accent-hue: 250;
    --brand-hue: var(--accent-hue);
    --brand-chroma: 0.18;
    --font-sans:
      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-display: var(--font-sans);
    --platform-light-bg: #fff;
    --platform-dark-bg: #000;

    --bg: var(--platform-light-bg);
    --surface: var(--bg);
    --surface-strong: var(--bg);
    --surface-variant: var(--bg);
    --on-surface: #111827;
    --on-surface-variant: #4b5563;

    --primary: #086fbe;
    --on-primary: #ffffff;
    --primary-container: #e7f1fb;
    --on-primary-container: #15476f;

    --outline: #cfd8e3;
    --outline-variant: #e3e8ef;

    --error: #dc2626;
    --success: #16a34a;
    --warning: #f5a623;
    --info: #2563eb;

    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.5rem;
    --radius-pill: 9999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12);

    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: clamp(0.75rem, 2vi, 1.25rem);
    --spacing-lg: clamp(1.25rem, 4vi, 2.25rem);

    --ease-standard: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-elastic: var(--ease-standard);
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --bg: var(--platform-light-bg);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--platform-dark-bg);
    --surface: var(--bg);
    --surface-strong: var(--bg);
    --surface-variant: var(--bg);
    --on-surface: #f3f4f6;
    --on-surface-variant: #c5ccd6;

    --primary: #58a6e8;
    --on-primary: #07131f;
    --primary-container: #173b59;
    --on-primary-container: #d9ecfb;

    --outline: #64748b;
    --outline-variant: #475569;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.35);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: var(--platform-dark-bg);
      --surface: var(--bg);
      --surface-strong: var(--bg);
      --surface-variant: var(--bg);
      --on-surface: #f3f4f6;
      --on-surface-variant: #c5ccd6;

      --primary: #58a6e8;
      --on-primary: #07131f;
      --primary-container: #173b59;
      --on-primary-container: #d9ecfb;

      --outline: #64748b;
      --outline-variant: #475569;

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
      --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.35);
    }
  }

  body:has(#platform-theme-light:checked) {
    color-scheme: light;
    --bg: var(--platform-light-bg);
    --surface: var(--bg);
    --surface-strong: var(--bg);
    --surface-variant: var(--bg);
    --on-surface: #111827;
    --on-surface-variant: #4b5563;
    --primary: #086fbe;
    --on-primary: #ffffff;
    --primary-container: #e7f1fb;
    --on-primary-container: #15476f;
    --outline: #cfd8e3;
    --outline-variant: #e3e8ef;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12);
  }

  body:has(#platform-theme-dark:checked) {
    color-scheme: dark;
    --bg: var(--platform-dark-bg);
    --surface: var(--bg);
    --surface-strong: var(--bg);
    --surface-variant: var(--bg);
    --on-surface: #f3f4f6;
    --on-surface-variant: #c5ccd6;
    --primary: #58a6e8;
    --on-primary: #07131f;
    --primary-container: #173b59;
    --on-primary-container: #d9ecfb;
    --outline: #64748b;
    --outline-variant: #475569;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.35);
  }

  html,
  body {
    background-color: var(--bg);
    background-image: none;
    color: var(--on-surface);
  }

  /* Theme toggle positioning is context-only; appearance lives in theme-switch.css. */
  .login-theme-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2001;
  }

  @media (max-width: 640px) {
    .login-theme-toggle {
      top: 16px;
      right: 16px;
    }
  }

  /* Floating feedback button (CSP-compliant, no inline styles needed) */
  .floating-feedback.theme-choice-label {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: var(--surface);
    text-decoration: none;
    min-width: auto;
    min-height: auto;
    padding: 0;
    border: none;
    line-height: normal;
  }

  .floating-feedback .theme-choice-icon {
    line-height: normal;
  }

  .floating-feedback .theme-choice-icon {
    font-size: 1.25rem;
  }

  .floating-feedback .theme-choice-text {
    display: none;
  }
}