/**
 * LINTENIUM FIELD TERMINAL
 * Core styles - Modern, efficient, cutting-edge
 * Next-gen CSS: @layer, @property, OKLCH, View Transitions
 */

/* Define cascade layer order */
@layer base, tokens, theme.futuristic, theme.cold-archive, effects, utilities;

/* Define typed custom properties for smooth theme transitions */
@property --theme-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(75% 0.25 195);
}

@property --theme-bg-deep {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(10% 0.02 240);
}

@property --theme-bg-surface {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(15% 0.03 235);
}

@property --theme-text {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(85% 0.05 190);
}

@property --theme-text-dim {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(50% 0.03 195);
}

@property --theme-text-bright {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(95% 0.02 190);
}

/* Futuristic theme (default) */
@layer theme.futuristic {
  :root {
    /* Theme-agnostic color properties */
    --theme-primary: oklch(75% 0.25 195);        /* cyan #00d9ff */
    --theme-bg-deep: oklch(10% 0.02 240);        /* deep space #0a0e1a */
    --theme-bg-surface: oklch(15% 0.03 235);     /* terminal bg #0f1419 */
    --theme-text: oklch(85% 0.05 190);           /* light gray #e0e0e0 */
    --theme-text-dim: oklch(50% 0.03 195);       /* dim gray #808080 */
    --theme-text-bright: oklch(95% 0.02 190);    /* white #ffffff */

    /* Color palette - Deep space terminal */
    --color-bg-deep: var(--theme-bg-deep);
    --color-bg-terminal: var(--theme-bg-surface);
    --color-bg-overlay: rgba(15, 20, 25, 0.95);

    --color-primary: var(--theme-primary);
    --color-secondary: #7b2ff7;
    --color-accent: #ff006e;
    --color-success: #00ff9f;
    --color-warning: #ffb700;
    --color-error: #ff3864;

    --color-text: var(--theme-text);
    --color-text-dim: var(--theme-text-dim);
    --color-text-bright: var(--theme-text-bright);

    /* Terminal-specific colors */
    --color-prompt: var(--color-primary);
    --color-command: var(--color-text-bright);
    --color-output: var(--color-text);
    --color-error-text: var(--color-error);

    /* Effects */
    --glow-primary: 0 0 10px var(--color-primary);
    --glow-accent: 0 0 15px var(--color-accent);
  }
}

/* Shared tokens (not theme-specific) */
@layer tokens {
  :root {
    /* Typography - system monospace fonts for privacy/offline */
    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Timing */
    --scan-speed: 8s;
    --cursor-blink: 1s;
    --transition-fast: 0.15s;
    --transition-base: 0.3s;
    --transition-slow: 0.6s;

    /* Z-index layers */
    --z-background: -1;
    --z-content: 1;
    --z-overlay: 10;
    --z-modal: 100;
  }
}

/* Enable smooth color transitions on theme properties */
:root {
  transition:
    --theme-primary var(--transition-slow) ease-in-out,
    --theme-bg-deep var(--transition-slow) ease-in-out,
    --theme-bg-surface var(--transition-slow) ease-in-out,
    --theme-text var(--transition-slow) ease-in-out,
    --theme-text-dim var(--transition-slow) ease-in-out,
    --theme-text-bright var(--transition-slow) ease-in-out;
}

/* Reset and base styles */
@layer base {
  *,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  html {
      font-size: var(--font-size-base);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  body {
      font-family: var(--font-mono);
      background: var(--color-bg-deep);
      color: var(--color-text);
      line-height: 1.6;
      min-height: 100vh;
      overflow: hidden;
      position: relative;
  }

  code {
      background: rgba(0, 217, 255, 0.1);
      padding: 0.2em 0.4em;
      border-radius: 3px;
      font-family: inherit;
      color: var(--color-primary);
  }
}

/* Background layers and effects */
@layer effects {
  .bg-layers {
      position: fixed;
      inset: 0;
      z-index: var(--z-background);
      pointer-events: none;
  }

  .bg-stars {
      position: absolute;
      inset: 0;
      background-image:
          radial-gradient(1px 1px at 20px 30px, var(--color-primary), transparent),
          radial-gradient(1px 1px at 60px 70px, var(--color-secondary), transparent),
          radial-gradient(1px 1px at 50px 50px, var(--color-text-dim), transparent),
          radial-gradient(1px 1px at 130px 80px, var(--color-primary), transparent),
          radial-gradient(1px 1px at 90px 100px, var(--color-text-dim), transparent);
      background-size: 200px 200px;
      animation: stars-drift 60s linear infinite;
      opacity: 0.4;
  }

  @keyframes stars-drift {
      from { transform: translateY(0); }
      to { transform: translateY(-200px); }
  }

  .bg-grid {
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(var(--color-primary) 1px, transparent 1px),
          linear-gradient(90deg, var(--color-primary) 1px, transparent 1px);
      background-size: 50px 50px;
      opacity: 0.05;
      animation: grid-pulse 4s ease-in-out infinite;
  }

  @keyframes grid-pulse {
      0%, 100% { opacity: 0.05; }
      50% { opacity: 0.08; }
  }

  .bg-scanlines {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(0, 0, 0, 0.3) 2px,
          rgba(0, 0, 0, 0.3) 4px
      );
      pointer-events: none;
      animation: scanlines var(--scan-speed) linear infinite;
  }

  @keyframes scanlines {
      from { transform: translateY(0); }
      to { transform: translateY(100vh); }
  }

  /* Selection styling */
  ::selection {
      background: var(--color-primary);
      color: var(--color-bg-deep);
  }

  ::-moz-selection {
      background: var(--color-primary);
      color: var(--color-bg-deep);
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
      width: 8px;
  }

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

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

  ::-webkit-scrollbar-thumb:hover {
      background: var(--color-secondary);
  }
}

/* Utility classes */
@layer utilities {
  .text-primary { color: var(--color-primary); }
  .text-secondary { color: var(--color-secondary); }
  .text-accent { color: var(--color-accent); }
  .text-success { color: var(--color-success); }
  .text-warning { color: var(--color-warning); }
  .text-error { color: var(--color-error); }
  .text-dim { color: var(--color-text-dim); }
  .text-bright { color: var(--color-text-bright); }

  .glow {
      text-shadow: var(--glow-primary);
  }

  .glow-accent {
      text-shadow: var(--glow-accent);
  }

  /* Accessibility */
  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
  }

  /* Focus styles */
  :focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
  }
}

/* View Transitions API */
@view-transition {
    navigation: auto;
}

/* Default transition animations */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Futuristic theme transitions */
:root::view-transition-old(root) {
  animation-name: fade-out-futuristic;
}

:root::view-transition-new(root) {
  animation-name: fade-in-futuristic;
}

@keyframes fade-out-futuristic {
  from {
    opacity: 1;
    filter: brightness(1);
  }
  to {
    opacity: 0;
    filter: brightness(0.8) blur(2px);
  }
}

@keyframes fade-in-futuristic {
  from {
    opacity: 0;
    filter: brightness(1.2) blur(4px);
  }
  to {
    opacity: 1;
    filter: brightness(1);
  }
}

/* Terminal output lines get auto-names for smooth transitions */
.terminal-output > * {
  view-transition-name: match-element;
  view-transition-class: terminal-line;
}

/* Animate terminal lines as a group */
::view-transition-group(*.terminal-line) {
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
}