/* ============================================
   SMARTSTACK PACKAGE CSS
   Design tokens + base styles (NO Tailwind utilities).
   Consumers must import their own Tailwind v4 and add a source-scan
   directive pointing at this package's dist directory.
   See README.md "Usage" section for the full snippet.

   IMPORTANT — never write the literal source-scan directive inside this
   CSS file (even commented). Tailwind v4's parser scans the whole file
   for @-rules without respecting comment boundaries, so an example with
   a glob string containing `**`+`*` would be parsed and emit an
   "Unterminated string" build error on every consumer project.
   ============================================ */

/* Configure dark mode to use .dark class selector */
@custom-variant dark (&:where(.dark, .dark *));

/* ============================================
   SMARTSTACK DESIGN SYSTEM v2.0
   Tailwind theme tokens
   ============================================ */

@theme {
  /* Primary colors - Indigo (softer than pure blue) */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;
  --color-primary-950: #1e1b4b;

  /* Accent colors - Violet */
  --color-accent-50: #f5f3ff;
  --color-accent-100: #ede9fe;
  --color-accent-200: #ddd6fe;
  --color-accent-300: #c4b5fd;
  --color-accent-400: #a78bfa;
  --color-accent-500: #8b5cf6;
  --color-accent-600: #7c3aed;
  --color-accent-700: #6d28d9;
  --color-accent-800: #5b21b6;
  --color-accent-900: #4c1d95;
  --color-accent-950: #2e1065;

  /* Fonts */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Import base design system (tokens + component classes) */
/* inlined from src/base.css */
/* ============================================
   SMARTSTACK DESIGN SYSTEM v2.0
   Base styles - Design tokens & custom components

   This file contains ONLY custom CSS (no Tailwind utilities).
   Safe for use alongside any CSS framework without cascade conflicts.
   ============================================ */

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   LIGHT THEME (Default) - Warm whites
   ============================================ */
:root {
  /* Primary colors - Indigo (from @theme, needed for var() usage) */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;
  --color-primary-950: #1e1b4b;

  /* Font (from @theme) */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Border Radius - Customizable per element */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-badge: 8px;
  --radius-input: 8px;
  --radius-modal: 16px;
  --radius-menu-item: 8px;

  /* Backgrounds */
  --bg-app: #fafafa;
  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f5;
  --bg-tertiary: #e4e4e7;
  --bg-card: #ffffff;
  --bg-hover: #f4f4f5;
  --bg-active: #e4e4e7;

  /* Text - Soft blacks */
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #71717a;
  --text-muted: #a1a1aa;
  --text-inverse: #fafafa;

  /* Borders */
  --border-color: #e4e4e7;
  --border-subtle: #f4f4f5;
  --border-strong: #d4d4d8;
  /* Thickness of generic borders. Overridden at runtime by ThemeContext from
     borderColors.width (Identity tab → ThemeSchemaEditor slider). */
  --border-width: 1px;

  /* Status Colors */
  --success-bg: #f0fdfa;
  --success-text: #0f766e;
  --success-border: #99f6e4;
  --success-dot: #14b8a6;

  --warning-bg: #fffbeb;
  --warning-text: #b45309;
  --warning-border: #fde68a;
  --warning-dot: #f59e0b;

  --error-bg: #fff1f2;
  --error-text: #be123c;
  --error-border: #fecdd3;
  --error-dot: #f43f5e;

  --info-bg: #f0f9ff;
  --info-text: #0369a1;
  --info-border: #bae6fd;
  --info-dot: #0ea5e9;

  /* Tooltip solid backgrounds (for readability) */
  --tooltip-error-bg: #fef2f2;
  --tooltip-warning-bg: #fefce8;
  --tooltip-success-bg: #f0fdf4;
  --tooltip-info-bg: #eff6ff;

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.07), 0 8px 10px -6px rgb(0 0 0 / 0.07);

  /* Accent transparents */
  --accent-bg: #eef2ff;
  --accent-text: #4338ca;
  --accent-border: #c7d2fe;

  /* Category palette — semantic slots for role categories, application badges,
     and other taxonomic UI elements. Distinct from status tokens (which are
     reserved for genuine messages: toasts, validation, alerts). Overridable
     at runtime by ThemeContext.applyCategoryColors() once the theme exposes
     CategoryColorsJson. */
  --category-global-bg: #faf5ff;
  --category-global-text: #9333ea;
  --category-global-border: #e9d5ff;

  --category-admin-bg: #fff1f2;
  --category-admin-text: #be123c;
  --category-admin-border: #fecdd3;

  --category-manager-bg: #f0f9ff;
  --category-manager-text: #0369a1;
  --category-manager-border: #bae6fd;

  --category-contributor-bg: #f0fdfa;
  --category-contributor-text: #0f766e;
  --category-contributor-border: #99f6e4;

  --category-viewer-bg: #f4f4f5;
  --category-viewer-text: #52525b;
  --category-viewer-border: #e4e4e7;

  --category-custom-bg: #fff7ed;
  --category-custom-text: #c2410c;
  --category-custom-border: #fed7aa;

  /* Accent Color Shades (dynamically set by ThemeContext) */
  --color-accent-50: #eef2ff;
  --color-accent-100: #e0e7ff;
  --color-accent-200: #c7d2fe;
  --color-accent-300: #a5b4fc;
  --color-accent-400: #818cf8;
  --color-accent-500: #6366f1;
  --color-accent-600: #4f46e5;
  --color-accent-700: #4338ca;
  --color-accent-800: #3730a3;
  --color-accent-900: #312e81;
  --color-accent-950: #1e1b4b;

  /* Item Palette Colors (dynamically set by ThemeContext) */
  --item-color-light: #ffffff;
  --item-color-medium: #f4f4f5;
  --item-color-dark: #e4e4e7;
  --item-color-border: #d4d4d8;

  /* Data Visualisation palette — dashboards, KPI cards, charts.
     Distinct from --accent-* (UI) and --success/warning/error/info (status).
     Defaults below are colourblind-safe (Carbon/Polaris/ColorBrewer-inspired);
     overridden at runtime by ThemeContext.applyDataViz(). */
  --dataviz-surface: #ffffff;
  --dataviz-surface-elevated: #f9fafb;
  --dataviz-accent: #2563eb;
  --dataviz-trend-up: #16a34a;
  --dataviz-trend-down: #dc2626;
  --dataviz-trend-neutral: #6b7280;
  --dataviz-cat-1: #2563eb;
  --dataviz-cat-2: #14b8a6;
  --dataviz-cat-3: #8b5cf6;
  --dataviz-cat-4: #f59e0b;
  --dataviz-cat-5: #ec4899;
  --dataviz-cat-6: #10b981;
  --dataviz-cat-7: #f97316;
  --dataviz-cat-8: #6366f1;
  --dataviz-cat-9: #06b6d4;
  --dataviz-cat-10: #84cc16;
  --dataviz-cat-11: #d946ef;
  --dataviz-cat-12: #ef4444;
  --dataviz-seq-low: #dbeafe;
  --dataviz-seq-mid: #3b82f6;
  --dataviz-seq-high: #1e3a8a;

  /* Toggle switch knob - always visible on both ON/OFF tracks */
  --toggle-knob: #ffffff;
}

/* ============================================
   DARK THEME - Warm grays (NOT pure black)
   Key change: #161618 instead of #0a0a0a
   ============================================ */
.dark {
  color-scheme: dark;

  /* Backgrounds - Warm dark grays */
  --bg-app: #161618;
  --bg-primary: #1c1c1f;
  --bg-secondary: #232326;
  --bg-tertiary: #2a2a2e;
  --bg-card: #1c1c1f;
  --bg-hover: #27272a;
  --bg-active: #3f3f46;

  /* Text - Softer off-whites for better readability */
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-muted: #52525b;
  --text-inverse: #e4e4e7;

  /* Borders */
  --border-color: #3f3f46;
  --border-subtle: #27272a;
  --border-strong: #52525b;
  --border-width: 1px;

  /* Status Colors (adjusted for dark) */
  --success-bg: rgba(20, 184, 166, 0.15);
  --success-text: #5eead4;
  --success-border: rgba(20, 184, 166, 0.3);
  --success-dot: #14b8a6;

  --warning-bg: rgba(245, 158, 11, 0.15);
  --warning-text: #fbbf24;
  --warning-border: rgba(245, 158, 11, 0.3);
  --warning-dot: #f59e0b;

  --error-bg: rgba(244, 63, 94, 0.15);
  --error-text: #fb7185;
  --error-border: rgba(244, 63, 94, 0.3);
  --error-dot: #f43f5e;

  --info-bg: rgba(14, 165, 233, 0.15);
  --info-text: #7dd3fc;
  --info-border: rgba(14, 165, 233, 0.3);
  --info-dot: #0ea5e9;

  /* Tooltip solid backgrounds (for readability on dark theme) */
  --tooltip-error-bg: #3b1c1e;
  --tooltip-warning-bg: #3b2f1a;
  --tooltip-success-bg: #1a3329;
  --tooltip-info-bg: #1a2c3b;

  /* Shadows for dark theme */
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);

  /* Accent transparents */
  --accent-bg: rgba(99, 102, 241, 0.15);
  --accent-text: #a5b4fc;
  --accent-border: rgba(99, 102, 241, 0.3);

  /* Category palette — dark mode tuning */
  --category-global-bg: rgba(147, 51, 234, 0.15);
  --category-global-text: #d8b4fe;
  --category-global-border: rgba(147, 51, 234, 0.3);

  --category-admin-bg: rgba(244, 63, 94, 0.15);
  --category-admin-text: #fb7185;
  --category-admin-border: rgba(244, 63, 94, 0.3);

  --category-manager-bg: rgba(14, 165, 233, 0.15);
  --category-manager-text: #7dd3fc;
  --category-manager-border: rgba(14, 165, 233, 0.3);

  --category-contributor-bg: rgba(20, 184, 166, 0.15);
  --category-contributor-text: #5eead4;
  --category-contributor-border: rgba(20, 184, 166, 0.3);

  --category-viewer-bg: #232326;
  --category-viewer-text: #a1a1aa;
  --category-viewer-border: #3f3f46;

  --category-custom-bg: rgba(234, 88, 12, 0.15);
  --category-custom-text: #fdba74;
  --category-custom-border: rgba(234, 88, 12, 0.3);

  /* Item Palette Colors (dark mode defaults) */
  --item-color-light: #1c1c1f;
  --item-color-medium: #27272a;
  --item-color-dark: #3f3f46;
  --item-color-border: #52525b;

  /* Data Visualisation palette — dark mode tuning */
  --dataviz-surface: #1c1c1f;
  --dataviz-surface-elevated: #27272a;
  --dataviz-accent: #3b82f6;
  --dataviz-trend-up: #22c55e;
  --dataviz-trend-down: #f43f5e;
  --dataviz-trend-neutral: #a1a1aa;
  --dataviz-cat-1: #3b82f6;
  --dataviz-cat-2: #2dd4bf;
  --dataviz-cat-3: #a78bfa;
  --dataviz-cat-4: #fbbf24;
  --dataviz-cat-5: #f472b6;
  --dataviz-cat-6: #34d399;
  --dataviz-cat-7: #fb923c;
  --dataviz-cat-8: #818cf8;
  --dataviz-cat-9: #22d3ee;
  --dataviz-cat-10: #a3e635;
  --dataviz-cat-11: #e879f9;
  --dataviz-cat-12: #f87171;
  --dataviz-seq-low: #1e3a8a;
  --dataviz-seq-mid: #3b82f6;
  --dataviz-seq-high: #bfdbfe;

  /* Toggle switch knob - white for visibility on dark tracks */
  --toggle-knob: #ffffff;
}

/* Apply theme variables */
body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Native form controls: align with the active theme accent.
   Modern browsers honour `accent-color` for checkboxes, radios, range inputs,
   and progress bars — this gives us themed natives without custom components. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--color-accent-500);
}

/* ============================================
   SCROLLBAR STYLES
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ============================================
   COMPONENT CLASSES
   Wrapped in @layer components so Tailwind
   utilities (pl-*, pr-*, py-*, etc.) can
   override these defaults when needed.
   ============================================ */

/* Make Tailwind's generic .border family respect the theme's --border-width
   (driven by ThemeContext from the user's slider in Identity → ThemeSchemaEditor).
   Specific widths like .border-2 / .border-4 keep their literal value because
   their selectors have higher specificity than :where() (which is 0). */
:where(.border) { border-width: var(--border-width, 1px); }
:where(.border-t) { border-top-width: var(--border-width, 1px); }
:where(.border-r) { border-right-width: var(--border-width, 1px); }
:where(.border-b) { border-bottom-width: var(--border-width, 1px); }
:where(.border-l) { border-left-width: var(--border-width, 1px); }
:where(.border-x) { border-left-width: var(--border-width, 1px); border-right-width: var(--border-width, 1px); }
:where(.border-y) { border-top-width: var(--border-width, 1px); border-bottom-width: var(--border-width, 1px); }

/* Map Tailwind's generic rounded-* classes onto the theme's semantic --radius-*
   tokens. Same :where() trick — components that explicitly use rounded-[12px] or
   rounded-[var(--radius-modal)] keep priority. Mapping follows the intent of
   the original size: rounded-md ≈ input, rounded-lg ≈ button, rounded-xl ≈ card,
   rounded-2xl ≈ modal. Circular/very-tiny radii (.rounded-full, .rounded-sm)
   stay untouched to preserve intent (icons, dots, micro-pills). */
:where(.rounded) { border-radius: var(--radius-input, 0.25rem); }
:where(.rounded-md) { border-radius: var(--radius-input, 0.375rem); }
:where(.rounded-lg) { border-radius: var(--radius-button, 0.5rem); }
:where(.rounded-xl) { border-radius: var(--radius-card, 0.75rem); }
:where(.rounded-2xl) { border-radius: var(--radius-modal, 1rem); }
:where(.rounded-t-xl) { border-top-left-radius: var(--radius-card, 0.75rem); border-top-right-radius: var(--radius-card, 0.75rem); }
:where(.rounded-t-2xl) { border-top-left-radius: var(--radius-modal, 1rem); border-top-right-radius: var(--radius-modal, 1rem); }
:where(.rounded-b-xl) { border-bottom-left-radius: var(--radius-card, 0.75rem); border-bottom-right-radius: var(--radius-card, 0.75rem); }
:where(.rounded-b-2xl) { border-bottom-left-radius: var(--radius-modal, 1rem); border-bottom-right-radius: var(--radius-modal, 1rem); }

@layer components {
  /* Gradient text utility */
  .gradient-text {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Card component - solid background, item palette colors available for tables/grids */
  .card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
  }

  .card-elevated {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
  }

  /* Item palette utility classes for tables, grids, alternating rows */
  .item-light {
    background-color: var(--item-color-light);
  }

  .item-medium {
    background-color: var(--item-color-medium);
  }

  .item-dark {
    background-color: var(--item-color-dark);
  }

  .item-border {
    border-color: var(--item-color-border);
  }

  /* Glass effect (standalone utility) */
  .glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .dark .glass {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Badge styles - uses dynamic radius */
  .badge-success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-badge);
  }

  .badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-badge);
  }

  .badge-error {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-badge);
  }

  .badge-info {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-badge);
  }

  .badge-accent {
    background: var(--accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-badge);
  }

  /* Animated gradient background */
  .animated-gradient {
    background: linear-gradient(-45deg, var(--color-primary-600), var(--color-accent-600), var(--color-primary-500), var(--color-accent-500));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }

  /* Hover card effect */
  .hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .hover-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  /* Focus ring */
  .focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-border);
  }

  /* Input styles - uses dynamic radius */
  .input {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-input);
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .input:focus {
    outline: none;
    border-color: var(--color-accent-500);
    box-shadow: 0 0 0 3px var(--accent-border);
  }

  .input::placeholder {
    color: var(--text-muted);
  }

  /* Button base - uses dynamic radius */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-button);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
  }

  .btn-primary {
    background: var(--color-accent-600);
    color: white;
  }

  .btn-primary:hover {
    background: var(--color-accent-700);
    box-shadow: var(--shadow-md);
  }

  .btn-primary:focus-visible {
    outline: 2px solid var(--color-accent-500);
    outline-offset: 2px;
  }

  .btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
  }

  .btn-secondary:hover {
    background: var(--bg-tertiary);
  }

  .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
  }

  .btn-ghost {
    background: transparent;
    color: var(--text-secondary);
  }

  .btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  /* Tooltip Animation */
  .tooltip-animation {
    animation: tooltip-fade-in 0.15s ease-out forwards;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes tooltip-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   COLOR INPUT NORMALIZATION
   Native <input type="color"> shows a square swatch that ignores
   the outer border-radius — this removes the internal padding and
   makes the swatch inherit the input's rounded corners.
   ============================================ */
input[type="color"] {
  padding: 2px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: inherit;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: inherit;
}
input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: inherit;
}

