/**
 * Prism Design System Styles
 *
 * Nordic-inspired component library with design token foundation.
 * Includes dark mode support via data-theme attribute.
 *
 * ⚠️ AUTO-GENERATED BY PRISM
 */

@import './design-tokens.css';
@import './custom-tokens.css';

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

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

@layer base {
  html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body {
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-text));
    min-height: 100vh;
    line-height: var(--leading-normal);
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    color: rgb(var(--color-text));
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  /* Links */
  a {
    color: rgb(var(--color-accent));
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-default);
  }

  a:hover {
    color: rgb(var(--color-accent-hover));
  }

  /* Selection */
  ::selection {
    background-color: rgb(var(--color-accent) / 0.2);
    color: rgb(var(--color-text));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMPONENT STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ═══════════════════════════════════════════════════════════════════════════
     BUTTONS
     ═══════════════════════════════════════════════════════════════════════════ */

  .btn {
    @apply inline-flex items-center justify-center font-medium
           transition-all duration-normal ease-default
           focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-button);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
  }

  .btn-primary {
    @apply btn;
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-text-inverse));
    box-shadow: var(--shadow-sm);
  }

  .btn-primary:hover:not(:disabled) {
    background-color: rgb(var(--color-primary-hover));
    box-shadow: var(--shadow-md);
  }

  .btn-primary:active:not(:disabled) {
    background-color: rgb(var(--color-primary-active));
  }

  .btn-primary:focus-visible {
    --tw-ring-color: rgb(var(--color-primary) / 0.5);
  }

  .btn-secondary {
    @apply btn;
    background-color: rgb(var(--color-surface-elevated));
    color: rgb(var(--color-text-secondary));
    border: 1px solid rgb(var(--color-border));
    box-shadow: var(--shadow-sm);
  }

  .btn-secondary:hover:not(:disabled) {
    background-color: rgb(var(--color-surface));
    border-color: rgb(var(--color-border));
    color: rgb(var(--color-text));
  }

  .btn-secondary:focus-visible {
    --tw-ring-color: rgb(var(--color-accent) / 0.5);
  }

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

  .btn-ghost:hover:not(:disabled) {
    background-color: rgb(var(--color-surface-sunken));
    color: rgb(var(--color-text));
  }

  .btn-danger {
    @apply btn;
    background-color: rgb(var(--color-error));
    color: rgb(var(--color-text-inverse));
    box-shadow: var(--shadow-sm);
  }

  .btn-danger:hover:not(:disabled) {
    background-color: rgb(var(--color-error-dark));
    box-shadow: var(--shadow-md);
  }

  .btn-danger:focus-visible {
    --tw-ring-color: rgb(var(--color-error) / 0.5);
  }

  /* Button Sizes */
  .btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
  }

  .btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--text-base);
  }

  /* Icon Button */
  .btn-icon {
    @apply btn;
    padding: var(--spacing-sm);
    aspect-ratio: 1;
  }

  .btn-icon.btn-sm {
    padding: var(--spacing-xs);
  }

  .btn-icon.btn-lg {
    padding: var(--spacing-md);
  }

  /* Loading State */
  .btn-loading {
    @apply relative pointer-events-none;
  }

  .btn-loading > *:not(.btn-spinner) {
    @apply invisible;
  }

  .btn-spinner {
    @apply absolute inset-0 flex items-center justify-center;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FORMS
     ═══════════════════════════════════════════════════════════════════════════ */

  .form-group {
    @apply space-y-1.5;
  }

  .form-label {
    @apply block font-medium;
    font-size: var(--text-sm);
    color: rgb(var(--color-text-secondary));
  }

  .form-hint {
    font-size: var(--text-xs);
    color: rgb(var(--color-text-muted));
  }

  .form-error {
    font-size: var(--text-xs);
    color: rgb(var(--color-error));
  }

  /* Input */
  .input {
    @apply w-full transition-colors duration-normal;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    background-color: rgb(var(--color-surface-elevated));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-input);
    color: rgb(var(--color-text));
  }

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

  .input:focus {
    @apply outline-none;
    border-color: rgb(var(--color-border-focus));
    box-shadow: 0 0 0 3px rgb(var(--color-accent) / 0.1);
  }

  .input:disabled {
    @apply opacity-50 cursor-not-allowed;
    background-color: rgb(var(--color-surface-sunken));
  }

  .input-error {
    @apply input;
    border-color: rgb(var(--color-error));
  }

  .input-error:focus {
    box-shadow: 0 0 0 3px rgb(var(--color-error) / 0.1);
  }

  /* Input Sizes */
  .input-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
  }

  .input-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--text-base);
  }

  /* Select */
  .select {
    @apply input appearance-none cursor-pointer;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem 1.25rem;
  }

  /* Checkbox */
  .checkbox {
    @apply appearance-none cursor-pointer transition-colors duration-fast;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(var(--color-border));
    background-color: rgb(var(--color-surface-elevated));
  }

  .checkbox:checked {
    background-color: rgb(var(--color-accent));
    border-color: rgb(var(--color-accent));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 0.75rem;
    background-position: center;
    background-repeat: no-repeat;
  }

  .checkbox:focus {
    @apply outline-none;
    box-shadow: 0 0 0 3px rgb(var(--color-accent) / 0.2);
  }

  /* Radio */
  .radio {
    @apply appearance-none cursor-pointer transition-colors duration-fast;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-full);
    border: 1px solid rgb(var(--color-border));
    background-color: rgb(var(--color-surface-elevated));
  }

  .radio:checked {
    border-color: rgb(var(--color-accent));
    border-width: 4px;
    background-color: rgb(var(--color-surface-elevated));
  }

  .radio:focus {
    @apply outline-none;
    box-shadow: 0 0 0 3px rgb(var(--color-accent) / 0.2);
  }

  /* Toggle/Switch */
  .toggle {
    @apply relative appearance-none cursor-pointer transition-colors duration-normal;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: rgb(var(--color-border));
  }

  .toggle::before {
    content: '';
    @apply absolute top-0.5 left-0.5 transition-transform duration-normal;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background-color: rgb(var(--color-surface-elevated));
    box-shadow: var(--shadow-sm);
  }

  .toggle:checked {
    background-color: rgb(var(--color-accent));
  }

  .toggle:checked::before {
    transform: translateX(1.25rem);
  }

  .toggle:focus {
    @apply outline-none;
    box-shadow: 0 0 0 3px rgb(var(--color-accent) / 0.2);
  }

  /* Label */
  .label {
    @apply block font-medium;
    font-size: var(--text-sm);
    color: rgb(var(--color-text-secondary));
    margin-bottom: var(--spacing-xs);
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     CARDS
     ═══════════════════════════════════════════════════════════════════════════ */

  .card {
    background-color: rgb(var(--color-surface-elevated));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
  }

  .card-hover {
    @apply card transition-all duration-normal;
  }

  .card-hover:hover {
    box-shadow: var(--shadow-md);
    border-color: rgb(var(--color-border));
  }

  .card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid rgb(var(--color-border-light));
  }

  .card-body {
    padding: var(--spacing-lg);
  }

  .card-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid rgb(var(--color-border-light));
    background-color: rgb(var(--color-surface));
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     TABLES
     ═══════════════════════════════════════════════════════════════════════════ */

  .table {
    @apply w-full text-left;
    font-size: var(--text-sm);
  }

  .table thead {
    background-color: rgb(var(--color-surface));
    border-bottom: 1px solid rgb(var(--color-border));
  }

  .table th {
    @apply font-medium uppercase tracking-wider;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-xs);
    color: rgb(var(--color-text-muted));
  }

  .table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgb(var(--color-border-light));
    color: rgb(var(--color-text-secondary));
  }

  .table tbody tr {
    @apply transition-colors duration-fast;
  }

  .table tbody tr:hover {
    background-color: rgb(var(--color-surface) / 0.5);
  }

  /* Table Variants */
  .table-compact th,
  .table-compact td {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .table-striped tbody tr:nth-child(even) {
    background-color: rgb(var(--color-surface) / 0.3);
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     BADGES
     ═══════════════════════════════════════════════════════════════════════════ */

  .badge {
    @apply inline-flex items-center font-medium;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
    border-radius: var(--radius-badge);
    line-height: var(--leading-none);
  }

  .badge-default {
    @apply badge;
    background-color: rgb(var(--color-surface-sunken));
    color: rgb(var(--color-text-secondary));
  }

  .badge-primary {
    @apply badge;
    background-color: rgb(var(--color-primary) / 0.1);
    color: rgb(var(--color-primary));
  }

  .badge-success {
    @apply badge;
    background-color: rgb(var(--color-success-light));
    color: rgb(var(--color-success-dark));
  }

  .badge-warning {
    @apply badge;
    background-color: rgb(var(--color-warning-light));
    color: rgb(var(--color-warning-dark));
  }

  .badge-error {
    @apply badge;
    background-color: rgb(var(--color-error-light));
    color: rgb(var(--color-error-dark));
  }

  .badge-info {
    @apply badge;
    background-color: rgb(var(--color-info-light));
    color: rgb(var(--color-info-dark));
  }

  /* Badge Variants */
  .badge-pill {
    border-radius: var(--radius-full);
  }

  .badge-dot {
    @apply inline-flex items-center gap-1.5;
    background: transparent;
    padding: 0;
  }

  .badge-dot::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     NAVIGATION
     ═══════════════════════════════════════════════════════════════════════════ */

  .nav-link {
    @apply flex items-center gap-2 transition-colors duration-fast;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    border-radius: var(--radius-md);
  }

  .nav-link:hover {
    background-color: rgb(var(--color-surface-sunken));
    color: rgb(var(--color-text));
  }

  .nav-link-active,
  .nav-link[aria-current="page"] {
    background-color: rgb(var(--color-surface-sunken));
    color: rgb(var(--color-text));
    font-weight: var(--font-medium);
  }

  /* Breadcrumb */
  .breadcrumb {
    @apply flex items-center gap-2;
    font-size: var(--text-sm);
  }

  .breadcrumb-item {
    color: rgb(var(--color-text-muted));
  }

  .breadcrumb-item:hover {
    color: rgb(var(--color-text));
  }

  .breadcrumb-item-current {
    color: rgb(var(--color-text));
    font-weight: var(--font-medium);
  }

  .breadcrumb-separator {
    color: rgb(var(--color-text-placeholder));
  }

  /* Tabs */
  .tabs {
    @apply flex gap-1 border-b;
    border-color: rgb(var(--color-border));
  }

  .tab {
    @apply transition-colors duration-fast;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }

  .tab:hover {
    color: rgb(var(--color-text));
  }

  .tab-active,
  .tab[aria-selected="true"] {
    color: rgb(var(--color-text));
    font-weight: var(--font-medium);
    border-bottom-color: rgb(var(--color-accent));
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     PAGE LAYOUT
     ═══════════════════════════════════════════════════════════════════════════ */

  .page-container {
    @apply mx-auto;
    max-width: 72rem;
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  @media (min-width: 640px) {
    .page-container {
      padding: var(--spacing-xl) var(--spacing-xl);
    }
  }

  .page-header {
    margin-bottom: var(--spacing-xl);
  }

  .page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    letter-spacing: var(--tracking-tight);
  }

  .page-subtitle {
    margin-top: var(--spacing-xs);
    color: rgb(var(--color-text-muted));
  }

  /* Prose Container (for content-heavy pages) */
  .container-prose {
    @apply mx-auto;
    max-width: 65ch;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     LAYOUT UTILITIES
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Stack - vertical spacing */
  .stack {
    @apply flex flex-col;
    gap: var(--spacing-md);
  }

  .stack-xs { gap: var(--spacing-xs); }
  .stack-sm { gap: var(--spacing-sm); }
  .stack-lg { gap: var(--spacing-lg); }
  .stack-xl { gap: var(--spacing-xl); }

  /* Cluster - horizontal spacing with wrap */
  .cluster {
    @apply flex flex-wrap items-center;
    gap: var(--spacing-md);
  }

  .cluster-xs { gap: var(--spacing-xs); }
  .cluster-sm { gap: var(--spacing-sm); }
  .cluster-lg { gap: var(--spacing-lg); }

  /* ═══════════════════════════════════════════════════════════════════════════
     ALERTS / NOTIFICATIONS
     ═══════════════════════════════════════════════════════════════════════════ */

  .alert {
    @apply flex items-start gap-3;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }

  .alert-info {
    @apply alert;
    background-color: rgb(var(--color-info-light));
    color: rgb(var(--color-info-dark));
  }

  .alert-success {
    @apply alert;
    background-color: rgb(var(--color-success-light));
    color: rgb(var(--color-success-dark));
  }

  .alert-warning {
    @apply alert;
    background-color: rgb(var(--color-warning-light));
    color: rgb(var(--color-warning-dark));
  }

  .alert-error {
    @apply alert;
    background-color: rgb(var(--color-error-light));
    color: rgb(var(--color-error-dark));
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     DIVIDERS
     ═══════════════════════════════════════════════════════════════════════════ */

  .divider {
    @apply border-0;
    height: 1px;
    background-color: rgb(var(--color-border));
    margin: var(--spacing-md) 0;
  }

  .divider-light {
    background-color: rgb(var(--color-border-light));
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SKELETON LOADING
     ═══════════════════════════════════════════════════════════════════════════ */

  .skeleton {
    @apply animate-pulse;
    background-color: rgb(var(--color-surface-sunken));
    border-radius: var(--radius-md);
  }

  .skeleton-text {
    @apply skeleton;
    height: 1em;
    width: 100%;
  }

  .skeleton-circle {
    @apply skeleton;
    border-radius: var(--radius-full);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Focus visible for accessibility */
:focus-visible {
  @apply outline-none;
  box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
  outline-offset: var(--ring-offset);
}

/* Smooth color transitions globally (opt-out with transition-none) */
* {
  transition-property: color, background-color, border-color;
  transition-duration: var(--transition-fast);
  transition-timing-function: var(--ease-default);
}

*:where([class*="transition-none"]) {
  transition: none;
}
