/* Design-system tokens — imported before all other styles */

/* Inter font is loaded via Google Fonts in base.html */

:root {
  /* Brand colours */
  --color-brand: #0EA5E9;          /* sky-500  — decorative use only (fails 4.5:1 on white) */
  --color-brand-dark: #0284C7;     /* sky-600  — primary interactive colour */
  --color-brand-darker: #0369A1;   /* sky-700  — hover / pressed states */

  /* Neutral / surface */
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;  /* slate-50 */
  --color-border: #e2e8f0;         /* slate-200 */
  --color-border-subtle: #f1f5f9;  /* slate-100 */

  /* Text */
  --color-text-primary: #0f172a;   /* slate-900 */
  --color-text-secondary: #475569; /* slate-600 */
  --color-text-muted: #64748b;     /* slate-500 */
  --color-text-placeholder: #94a3b8; /* slate-400 */

  /* Semantic */
  --color-success: #16a34a;        /* green-600 */
  --color-warning: #d97706;        /* amber-600 */
  --color-danger: #dc2626;         /* red-600 */
  --color-info: #0284C7;           /* sky-600 — aligned to brand */

  /* Radius */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Courier New', monospace;
  --text-label: 0.75rem;   /* 12px — minimum for uppercase tracking labels */

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

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transition */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* Dark-mode overrides */
.dark {
  --color-surface: #0f172a;        /* slate-900 */
  --color-surface-muted: #1e293b;  /* slate-800 */
  --color-border: #334155;         /* slate-700 */
  --color-border-subtle: #1e293b;  /* slate-800 */

  --color-text-primary: #f1f5f9;   /* slate-100 */
  --color-text-secondary: #cbd5e1; /* slate-300 */
  --color-text-muted: #94a3b8;     /* slate-400 */
  --color-text-placeholder: #64748b; /* slate-500 */
}

/*
 * Light-theme guard — keeps Tailwind dark: utilities from bleeding through
 * when the user's OS prefers dark but they've chosen light in the app.
 * These live here (not in base.html) so they're cached with the stylesheet.
 */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] body { background-color: #f8fafc; color: #0f172a; }
:root[data-theme="light"] header { background-color: rgba(255,255,255,0.9); color: #0f172a; border-color: #e2e8f0; }
:root[data-theme="light"] header a,
:root[data-theme="light"] header select,
:root[data-theme="light"] header button { color: #0f172a; }
/* Not on the active page: aria-current styling flattens the pill to a light
   background (see base.html), so the text must fall back to dark there. */
:root[data-theme="light"] header a.bg-slate-900:not([aria-current="page"]) { color: #ffffff; }
:root[data-theme="light"] .dark\:bg-slate-950 { background-color: #f8fafc; }
:root[data-theme="light"] .dark\:bg-slate-900 { background-color: #ffffff; }
:root[data-theme="light"] .dark\:bg-slate-800 { background-color: #f8fafc; }
:root[data-theme="light"] .dark\:text-slate-100 { color: #0f172a; }
:root[data-theme="light"] .dark\:text-slate-300 { color: #1f2937; }
:root[data-theme="light"] .dark\:text-slate-400 { color: #334155; }
:root[data-theme="light"] .dark\:text-white { color: #0f172a; }
:root[data-theme="light"] .dark\:border-slate-800,
:root[data-theme="light"] .dark\:border-slate-700,
:root[data-theme="light"] .dark\:divide-slate-700 { border-color: #e2e8f0; }
:root[data-theme="light"] .dark\:hover\:bg-slate-800:hover { background-color: #e2e8f0; }

/* Apply Inter globally */
html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Let the linked-client body explorer use the viewport instead of the
   standard narrow content column. Keep sizing here so it works without
   rebuilding the app's compiled Tailwind bundle. */
#main-content:has(#body-explorer-frame) {
  width: 100%;
  max-width: none !important;
}
#main-content:has(#body-explorer-frame) #body-explorer-card {
  width: 100%;
}
#main-content:has(#body-explorer-frame) #body-explorer-frame {
  display: block;
  width: 100% !important;
  height: 90vh !important;
  min-height: 800px !important;
}