@import "../styles/phase16-tokens.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-white text-blue-950 antialiased transition-colors dark:text-slate-100;
}

html.dark body {
  background-image:
    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
}

.shell {
  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
}

.card {
  @apply rounded-[2rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
  border-color: rgb(231 229 228 / 0.8);
  background-color: rgb(255 255 255 / 0.82);
}

html.dark .card {
  border-color: rgb(30 60 140 / 0.40);
  background-color: rgb(11 25 55 / 0.72);
}

.site-page {
  @apply min-h-screen overflow-hidden text-blue-950;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
}

html.dark .site-page {
  @apply text-slate-100;
  background-image:
    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
}

.site-glow {
  background-image:
    radial-gradient(circle at top left, rgba(234, 88, 12, 0.24), transparent 34%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 26%);
}

html.dark .site-glow {
  background-image:
    radial-gradient(circle at top left, rgba(251, 146, 60, 0.22), transparent 34%),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 26%);
}

.site-section {
  @apply shell py-10 sm:py-14 lg:py-16;
}

.site-panel {
  @apply rounded-[2rem] border p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors sm:p-8;
  border-color: rgb(231 229 228 / 0.8);
  background-color: rgb(255 255 255 / 0.82);
}

html.dark .site-panel {
  border-color: rgb(30 60 140 / 0.40);
  background-color: rgb(11 25 55 / 0.72);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
}

.site-panel-muted {
  @apply rounded-[2rem] border p-7 transition-colors sm:p-8;
  border-color: rgb(231 229 228 / 0.8);
  background-image: linear-gradient(160deg, #f5f8ff 0%, #edf2ff 100%);
}

html.dark .site-panel-muted {
  border-color: rgb(30 60 140 / 0.40);
  background-image: linear-gradient(160deg, #0c1830 0%, #10203e 100%);
}

.site-panel-contrast {
  @apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
  border-color: rgb(14 40 90 / 0.8);
  background-color: rgb(10 25 75);
}

html.dark .site-panel-contrast {
  border-color: rgb(30 64 175);
}

.site-kicker {
  @apply text-xs font-bold uppercase tracking-[0.28em] text-orange-600 dark:text-orange-400;
}

.site-title {
  @apply mt-4 text-4xl font-black tracking-[-0.04em] text-blue-950 dark:text-white sm:text-5xl;
}

.site-lead {
  @apply mt-5 text-base leading-8 text-stone-600 dark:text-slate-300 sm:text-lg;
}

.site-link-primary {
  @apply rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400;
}

.site-link-secondary {
  @apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
}

/* Phase 16 operational application layer */
@layer base {
  html {
    min-width: 320px;
    background: var(--rdg-surface-page);
    color: var(--rdg-text-primary);
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
  }

  body {
    min-height: 100dvh;
    background: var(--rdg-surface-page);
    color: var(--rdg-text-primary);
    font-family: var(--rdg-font-latin);
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--rdg-text-primary);
    line-height: 1.18;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

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

  a,
  button,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer components {
  .shell {
    width: min(100%, var(--rdg-container-max));
  }

  .panel,
  .card,
  .glass-card,
  .site-panel {
    border-color: var(--rdg-border);
    border-radius: var(--rdg-radius-lg);
    background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
    box-shadow: var(--rdg-shadow-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .site-panel-muted {
    border-color: var(--rdg-border);
    border-radius: var(--rdg-radius-lg);
    background: var(--rdg-surface-muted);
  }

  .site-panel-contrast {
    border-color: color-mix(in srgb, var(--rdg-blue-700) 68%, var(--rdg-border));
    border-radius: var(--rdg-radius-lg);
    background:
      radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--rdg-blue-500) 30%, transparent), transparent 40%),
      linear-gradient(135deg, var(--rdg-navy-900), var(--rdg-blue-800));
  }

  .btn-primary,
  .site-link-primary {
    min-height: var(--rdg-touch-min);
    border-radius: var(--rdg-radius-sm);
    background: var(--rdg-action-conversion);
    color: #ffffff;
    box-shadow: var(--rdg-shadow-subtle);
  }

  .btn-primary:hover,
  .site-link-primary:hover {
    background: var(--rdg-action-conversion-hover);
  }

  .btn-secondary,
  .site-link-secondary {
    min-height: var(--rdg-touch-min);
    border-color: var(--rdg-border-strong);
    border-radius: var(--rdg-radius-sm);
    background: var(--rdg-surface-primary);
    color: var(--rdg-action-primary);
  }

  .btn-secondary:hover,
  .site-link-secondary:hover {
    border-color: var(--rdg-action-primary);
    background: var(--rdg-soft-blue);
    color: var(--rdg-action-primary-hover);
  }

  .input-field,
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea {
    min-height: var(--rdg-touch-min);
    border-color: var(--rdg-border);
    border-radius: var(--rdg-radius-sm);
    background: var(--rdg-surface-primary);
    color: var(--rdg-text-primary);
  }

  .input-field::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: var(--rdg-text-subdued);
  }

  table {
    border-color: var(--rdg-border);
  }

  thead {
    background: var(--rdg-surface-muted);
    color: var(--rdg-text-secondary);
  }

  tbody tr {
    border-color: var(--rdg-border);
  }
}

@media (forced-colors: active) {
  .panel,
  .card,
  .glass-card,
  .site-panel,
  .site-panel-muted,
  .site-panel-contrast {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

html.dark body,
html[data-theme='dark'] body,
.site-page,
html.dark .site-page,
html[data-theme='dark'] .site-page {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--rdg-soft-blue) 78%, transparent), transparent 30%),
    var(--rdg-surface-page);
  color: var(--rdg-text-primary);
}

.site-glow,
html.dark .site-glow,
html[data-theme='dark'] .site-glow {
  background-image:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rdg-soft-orange) 72%, transparent), transparent 34%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--rdg-soft-blue) 72%, transparent), transparent 28%);
}

html.dark .card,
html.dark .site-panel,
html.dark .site-panel-muted,
html[data-theme='dark'] .card,
html[data-theme='dark'] .site-panel,
html[data-theme='dark'] .site-panel-muted {
  border-color: var(--rdg-border);
  background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
  box-shadow: var(--rdg-shadow-card);
}