@import "tailwindcss";

@layer base {
  :root,
  html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg-base: #030814;
    --color-bg-surface: rgba(7, 19, 38, 0.74);
    --color-bg-elevated: rgba(12, 30, 58, 0.82);
    --color-border: rgba(92, 139, 214, 0.22);
    --color-border-strong: rgba(96, 165, 250, 0.36);
    --color-border-subtle: rgba(148, 163, 184, 0.10);
    --color-text-primary: #F4F8FF;
    --color-text-secondary: #A9B8D0;
    --color-text-tertiary: #64748B;
    --color-accent: #2F7BFF;
    --color-cyan: #22D3EE;
    --color-emerald: #34D399;
    --color-violet: #A78BFA;
    --color-amber: #F59E0B;
    --color-red: #F87171;
    --glass-bg: linear-gradient(145deg, rgba(12, 35, 72, 0.66), rgba(2, 9, 23, 0.72));
    --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(96,165,250,0.05) 34%, transparent 72%);
    --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  }

  html[data-theme="light"] {
    color-scheme: light;
    --color-bg-base: #F7F1E8;
    --color-bg-surface: rgba(255, 252, 246, 0.88);
    --color-bg-elevated: rgba(255, 250, 242, 0.94);
    --color-border: rgba(86, 67, 48, 0.18);
    --color-border-strong: rgba(170, 103, 76, 0.36);
    --color-border-subtle: rgba(86, 67, 48, 0.10);
    --color-text-primary: #241A14;
    --color-text-secondary: #625447;
    --color-text-tertiary: #9B8A7A;
    --color-accent: #C7684C;
    --color-cyan: #2B8C91;
    --color-emerald: #2F7D5C;
    --color-violet: #7E5CA8;
    --color-amber: #B16A24;
    --color-red: #B94A37;
    --glass-bg: linear-gradient(145deg, rgba(255, 252, 246, 0.92), rgba(242, 232, 219, 0.78));
    --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(199,104,76,0.08) 38%, transparent 76%);
    --glass-shadow: 0 16px 42px rgba(88, 62, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.92);
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.45) transparent;
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    min-height: 100vh;
    background:
      radial-gradient(circle at 54% -8%, rgba(37, 99, 235, 0.42), transparent 35%),
      radial-gradient(circle at 80% 6%, rgba(14, 165, 233, 0.18), transparent 26%),
      linear-gradient(180deg, #020617 0%, #041021 48%, #06101d 100%);
    color: var(--color-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html[data-theme="light"] body {
    background:
      linear-gradient(180deg, #F4EDE3 0%, #FBF7EF 44%, #F1E7DA 100%);
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(96, 165, 250, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(96, 165, 250, 0.028) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 72%);
  }

  html[data-theme="light"] body::before {
    background-image:
      linear-gradient(rgba(91, 70, 52, 0.052) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91, 70, 52, 0.042) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.34), transparent 76%);
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  button {
    cursor: pointer;
  }
}

@layer components {
  .app-shell {
    color: var(--color-text-primary);
  }

  .app-header {
    border-color: var(--color-border-subtle);
    background: rgba(3, 8, 20, 0.76);
  }

  .app-sidebar {
    border-color: var(--color-border-subtle);
    background: rgba(2, 8, 23, 0.88);
  }

  html[data-theme="light"] .app-header {
    background: rgba(251, 247, 239, 0.78);
  }

  html[data-theme="light"] .app-sidebar {
    background: rgba(250, 245, 237, 0.90);
  }

  .cockpit-panel,
  .liquid-glass {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: linear-gradient(180deg, rgba(9, 20, 38, 0.84), rgba(5, 12, 24, 0.74));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(18px) saturate(128%);
    -webkit-backdrop-filter: blur(18px) saturate(128%);
  }

  html[data-theme="light"] .cockpit-panel,
  html[data-theme="light"] .liquid-glass {
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(247, 240, 230, 0.82));
    box-shadow: 0 14px 36px rgba(88, 62, 42, 0.09), inset 0 1px 0 rgba(255,255,255,0.86);
  }

  .cockpit-panel::before,
  .liquid-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.07), transparent 30%, rgba(96,165,250,0.05));
    opacity: 0.62;
  }

  html[data-theme="light"] .cockpit-panel::before,
  html[data-theme="light"] .liquid-glass::before {
    background: linear-gradient(90deg, rgba(255,255,255,0.72), transparent 32%, rgba(199,104,76,0.06));
  }

  .cockpit-panel > *,
  .liquid-glass > * {
    position: relative;
    z-index: 1;
  }

  .cockpit-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(16, 29, 52, 0.86), rgba(3, 9, 20, 0.86)),
      radial-gradient(circle at 76% 0%, rgba(47, 123, 255, 0.22), transparent 34%);
    box-shadow: 0 18px 60px rgba(0,0,0,0.22);
  }

  html[data-theme="light"] .cockpit-hero {
    background:
      linear-gradient(135deg, rgba(255, 252, 246, 0.96), rgba(239, 229, 216, 0.88)),
      radial-gradient(circle at 76% 0%, rgba(199, 104, 76, 0.14), transparent 34%);
    box-shadow: 0 16px 42px rgba(88, 62, 42, 0.10);
  }

  .cockpit-kicker {
    color: var(--color-text-tertiary);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
  }

  .cockpit-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.42);
    color: var(--color-text-secondary);
    padding: 0.375rem 0.625rem;
    font-size: 12px;
    line-height: 1;
  }

  html[data-theme="light"] .cockpit-pill {
    background: rgba(255, 252, 246, 0.66);
  }

  .cockpit-pill-success {
    border-color: rgba(52, 211, 153, 0.24);
    color: var(--color-emerald);
  }

  .cockpit-pill-warn {
    border-color: rgba(245, 158, 11, 0.28);
    color: var(--color-amber);
  }

  .cockpit-row {
    border-top: 1px solid var(--color-border-subtle);
    padding: 1rem 1.25rem;
    transition: background 160ms ease;
  }

  .cockpit-row:hover {
    background: rgba(47, 123, 255, 0.06);
  }

  html[data-theme="light"] .cockpit-row:hover {
    background: rgba(199, 104, 76, 0.07);
  }

  .cockpit-metric {
    min-height: 126px;
  }

  .cockpit-metric-icon {
    background: rgba(47, 123, 255, 0.10);
  }

  html[data-theme="light"] .cockpit-metric-icon {
    background: rgba(199, 104, 76, 0.10);
  }

  .cockpit-timeline-item {
    position: relative;
    padding-left: 1.25rem;
  }

  .cockpit-timeline-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(47, 123, 255, 0.10);
  }

  html[data-theme="light"] .cockpit-timeline-item::before {
    box-shadow: 0 0 0 4px rgba(199, 104, 76, 0.10);
  }

  .glass-button {
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.22), rgba(15, 23, 42, 0.42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 26px rgba(15, 23, 42, 0.25);
    color: var(--color-text-primary);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }

  html[data-theme="light"] .glass-button {
    border-color: rgba(121, 92, 64, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(238, 226, 211, 0.58));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 10px 24px rgba(88, 62, 42, 0.08);
  }

  .glass-input {
    border: 1px solid rgba(96, 165, 250, 0.20);
    background: rgba(2, 8, 23, 0.48);
    color: #dbeafe;
    outline: none;
  }

  html[data-theme="light"] .glass-input {
    border-color: rgba(121, 92, 64, 0.16);
    background: rgba(255, 252, 246, 0.78);
    color: var(--color-text-primary);
  }

  .glass-input:focus {
    border-color: rgba(96, 165, 250, 0.56);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  }

  html[data-theme="light"] .glass-input:focus {
    border-color: rgba(199, 104, 76, 0.48);
    box-shadow: 0 0 0 3px rgba(199, 104, 76, 0.13);
  }

  .blue-text-glow {
    text-shadow: 0 0 18px rgba(59, 130, 246, 0.46);
  }

  html[data-theme="light"] .blue-text-glow {
    text-shadow: none;
  }

  .theme-toggle-button {
    color: var(--color-text-secondary);
  }

  .theme-toggle-button[aria-pressed="true"],
  .theme-toggle-button:hover {
    color: var(--color-text-primary);
  }
}

@layer utilities {
  html[data-theme="light"] .text-slate-50,
  html[data-theme="light"] .text-slate-100,
  html[data-theme="light"] .text-slate-200,
  html[data-theme="light"] .text-blue-50,
  html[data-theme="light"] .text-blue-100 {
    color: var(--color-text-primary) !important;
  }

  html[data-theme="light"] .text-slate-300,
  html[data-theme="light"] .text-slate-400,
  html[data-theme="light"] .text-blue-200,
  html[data-theme="light"] .text-blue-300,
  html[data-theme="light"] .text-blue-400 {
    color: var(--color-text-secondary) !important;
  }

  html[data-theme="light"] .text-slate-500,
  html[data-theme="light"] .text-slate-600 {
    color: var(--color-text-tertiary) !important;
  }

  html[data-theme="light"] .text-blue-500,
  html[data-theme="light"] .text-cyan-300,
  html[data-theme="light"] .text-cyan-400 {
    color: var(--color-accent) !important;
  }

  html[data-theme="light"] .bg-\[\#030814\]\/76,
  html[data-theme="light"] .bg-\[\#020817\]\/88,
  html[data-theme="light"] .bg-slate-950\/25,
  html[data-theme="light"] .bg-slate-950\/28,
  html[data-theme="light"] .bg-slate-950\/35,
  html[data-theme="light"] .bg-slate-950\/45,
  html[data-theme="light"] .bg-slate-950,
  html[data-theme="light"] .bg-slate-900\/50,
  html[data-theme="light"] .bg-slate-900\/60,
  html[data-theme="light"] .bg-slate-800\/30,
  html[data-theme="light"] .bg-slate-800\/40,
  html[data-theme="light"] .bg-slate-800\/60 {
    background-color: rgba(255, 252, 246, 0.66) !important;
  }

  html[data-theme="light"] .bg-blue-500\/5,
  html[data-theme="light"] .bg-blue-500\/6,
  html[data-theme="light"] .bg-blue-500\/8,
  html[data-theme="light"] .bg-blue-500\/10,
  html[data-theme="light"] .bg-blue-500\/12,
  html[data-theme="light"] .bg-blue-500\/18,
  html[data-theme="light"] .bg-blue-500\/20 {
    background-color: rgba(199, 104, 76, 0.10) !important;
  }

  html[data-theme="light"] .border-slate-700\/50,
  html[data-theme="light"] .border-slate-700\/60,
  html[data-theme="light"] .border-slate-800,
  html[data-theme="light"] .border-slate-800\/40,
  html[data-theme="light"] .border-slate-800\/50,
  html[data-theme="light"] .border-slate-800\/60,
  html[data-theme="light"] .border-slate-800\/70,
  html[data-theme="light"] .border-slate-800\/80,
  html[data-theme="light"] .border-\[rgba\(96\,165\,250\,0\.12\)\],
  html[data-theme="light"] .border-\[rgba\(96\,165\,250\,0\.14\)\],
  html[data-theme="light"] .border-\[rgba\(96\,165\,250\,0\.16\)\],
  html[data-theme="light"] .border-\[rgba\(148\,163\,184\,0\.12\)\] {
    border-color: var(--color-border) !important;
  }

  html[data-theme="light"] .border-blue-400\/12,
  html[data-theme="light"] .border-blue-400\/18,
  html[data-theme="light"] .border-blue-400\/20,
  html[data-theme="light"] .border-blue-400\/30 {
    border-color: rgba(199, 104, 76, 0.28) !important;
  }

  html[data-theme="light"] .shadow-\[0_0_18px_rgba\(37\,99\,235\,0\.22\)\],
  html[data-theme="light"] .shadow-\[0_0_22px_rgba\(37\,99\,235\,0\.16\)\],
  html[data-theme="light"] .shadow-\[0_0_24px_rgba\(37\,99\,235\,0\.38\)\],
  html[data-theme="light"] .shadow-\[inset_0_0_0_1px_rgba\(96\,165\,250\,0\.34\)\,0_0_22px_rgba\(37\,99\,235\,0\.16\)\] {
    box-shadow: 0 10px 24px rgba(88, 62, 42, 0.10) !important;
  }

  html[data-theme="light"] .placeholder\:text-slate-600::placeholder {
    color: var(--color-text-tertiary) !important;
  }

  html[data-theme="light"] .hover\:bg-blue-500\/10:hover,
  html[data-theme="light"] .hover\:bg-blue-500\/8:hover,
  html[data-theme="light"] .hover\:bg-slate-800\/30:hover {
    background-color: rgba(199, 104, 76, 0.12) !important;
  }

  html[data-theme="light"] .hover\:text-slate-100:hover,
  html[data-theme="light"] .hover\:text-slate-200:hover,
  html[data-theme="light"] .hover\:text-slate-300:hover,
  html[data-theme="light"] .hover\:text-blue-100:hover,
  html[data-theme="light"] .hover\:text-blue-300:hover {
    color: var(--color-text-primary) !important;
  }
}
