/*
 * theme.css — design tokens (CSS variables) + base element defaults.
 * Single source of truth for color/typography/spacing/radius/shadow.
 * Part of the new design system: theme.css, layout.css, components.css,
 * utilities.css (+ legacy-compat.css for the minimum unavoidable BS3 shim).
 */

/* Prevents Alpine-controlled elements (x-cloak) from flashing visible
   before Alpine.js initializes and applies x-show/x-data bindings. */
[x-cloak] { display: none !important; }

:root {
  /* Brand (Keywits teal) */
  --brand-50: #edfbf9;
  --brand-100: #d2f5ef;
  --brand-200: #a6ebe0;
  --brand-300: #70dacb;
  --brand-400: #3ebfae;
  --brand-500: #1d9c8f;
  --brand-600: #0e6e68;
  --brand-700: #0a544f;
  --brand-800: #08403c;
  --brand-900: #062e2b;

  /* Accent (Keywits orange) — used sparingly for CTAs and highlights, kept
     distinct from --color-warning even though the hues are close. */
  --accent-100: #fef0d9;
  --accent-400: #fdbb55;
  --accent-500: #f5a623;
  --accent-600: #db8a0a;
  --accent-700: #b36e08;

  /* Neutrals */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic */
  --color-primary: var(--brand-600);
  --color-primary-hover: var(--brand-700);
  --color-primary-soft: var(--brand-50);
  --color-success: #16a34a;
  --color-success-soft: #f0fdf4;
  --color-warning: #d97706;
  --color-warning-soft: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-info: var(--brand-600);
  --color-info-soft: var(--brand-50);

  /* Surfaces */
  --surface-sidebar: var(--gray-900);
  --surface-sidebar-hover: var(--gray-800);
  /* Deliberately brand-600, not -900: at this dark, low-saturation depth the
     teal ramp reads almost black, which wouldn't stand out against the
     near-black sidebar. brand-600 is the vivid step that actually pops. */
  --surface-sidebar-active: var(--brand-600);
  --surface-body: var(--gray-50);
  --surface-card: #ffffff;
  --surface-border: var(--gray-200);

  /* Text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-inverse: #ffffff;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows (soft) */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);

  /* Motion */
  --transition-fast: 120ms ease;
  --transition: 180ms ease;

  /* Layout */
  --sidebar-width: 300px;
  --sidebar-width-collapsed: 73px;
  --header-height: 60px;
}

/* Dark mode — toggled by html.dark, driven by theme_settings.dark_skin (Settings page) */
html.dark {
  --surface-body: var(--gray-900);
  --surface-card: #141b2d;
  --surface-border: #263042;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --color-primary-soft: rgba(14, 110, 104, 0.16);
  --color-success-soft: rgba(22, 163, 74, 0.12);
  --color-warning-soft: rgba(217, 119, 6, 0.12);
  --color-danger-soft: rgba(220, 38, 38, 0.12);
  --color-info-soft: rgba(14, 110, 104, 0.16);
}

/* ---------- Base element defaults (on top of Bootstrap 5's reboot) ---------- */
/* Deliberately NOT setting html { font-size: 10px } here — that was the old
   theme's own convention (its utility classes used rem values scaled
   against a 10px root, e.g. .text-lg{font-size:1.9rem} = 19px). All of
   this design system's --fs-*/--space-* variables assume the standard
   16px root instead, so overriding it would scale everything down to
   ~62% of its intended size. */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background-color: var(--surface-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

small, .text-muted {
  color: var(--text-secondary) !important;
}

hr {
  border-color: var(--surface-border);
  opacity: 1;
}

::selection {
  background: var(--brand-200);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-pill);
}
html.dark ::-webkit-scrollbar-thumb {
  background: var(--gray-700);
}

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

/* Square-borders mode: existing Settings > border_mode toggle.
   Zeroes the radius tokens instead of loading a whole separate stylesheet. */
html.square-borders {
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
}

/* ---------------------------------------------------------------------------
 * Mobile sidebar: closed unless something opens it.
 *
 * The off-canvas position used to exist only as an Alpine :class binding, so if
 * Alpine did not run — it was loaded from a CDN, and a phone that could not
 * reach unpkg got nothing — the sidebar rendered in place, covering the page
 * with no way to dismiss it. The closed state belongs in CSS, where it holds
 * whether or not any script loads.
 *
 * :not(.translate-x-0) rather than a more specific override on purpose. An
 * earlier attempt set the closed transform on #app-sidebar and restated the
 * open one at #app-sidebar.translate-x-0; that lost to Tailwind's own transform
 * utility and left the panel stuck shut — the toggle moved Alpine's state and
 * the overlay appeared, but the sidebar never slid in. Here the rule simply
 * stops matching the moment Alpine marks it open, so there is no contest:
 * closed is ours, open is Tailwind's.
 *
 * Desktop (lg and up) is untouched — the sidebar is static there.
 * ------------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
	#app-sidebar:not(.translate-x-0) { transform: translateX(-100%); }
}