/**
 * VTG Modern Design System – 2026+
 * Future-proof tokens using OKLCH, fluid type, container queries readiness,
 * dark mode first, reduced-motion, and soft minimalism.
 *
 * Progressive enhancement: works on top of existing vtg.css
 */

/* --------------------------------------------------------------------------
   1. Cascade Layers (order control)
   -------------------------------------------------------------------------- */
@layer reset, tokens, base, components, utilities, overrides;

/* --------------------------------------------------------------------------
   2. Design Tokens (OKLCH – perceptually uniform)
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Brand – modern, calm, professional (product/service sites) */
    --vtg-brand: oklch(0.55 0.14 250);
    --vtg-brand-hover: oklch(0.48 0.16 250);
    --vtg-brand-subtle: oklch(0.94 0.03 250);

    /* Neutrals */
    --vtg-bg: oklch(0.99 0.005 250);
    --vtg-bg-elevated: oklch(1 0 0);
    --vtg-surface: oklch(0.97 0.008 250);
    --vtg-border: oklch(0.90 0.01 250);
    --vtg-text: oklch(0.22 0.02 260);
    --vtg-text-muted: oklch(0.45 0.02 260);
    --vtg-text-inverse: oklch(0.98 0.005 250);

    /* Semantic */
    --vtg-success: oklch(0.65 0.15 145);
    --vtg-warning: oklch(0.78 0.14 85);
    --vtg-danger: oklch(0.60 0.20 25);

    /* Spacing scale (fluid-ish) */
    --vtg-space-1: 0.25rem;
    --vtg-space-2: 0.5rem;
    --vtg-space-3: 0.75rem;
    --vtg-space-4: 1rem;
    --vtg-space-5: 1.5rem;
    --vtg-space-6: 2rem;
    --vtg-space-8: 3rem;
    --vtg-space-10: 4rem;
    --vtg-space-12: 6rem;

    /* Radius – soft modern */
    --vtg-radius-sm: 0.375rem;
    --vtg-radius: 0.75rem;
    --vtg-radius-lg: 1.25rem;
    --vtg-radius-full: 9999px;

    /* Shadows – soft, layered (not harsh) */
    --vtg-shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.05);
    --vtg-shadow: 0 4px 12px oklch(0.2 0.02 260 / 0.08);
    --vtg-shadow-lg: 0 12px 32px oklch(0.2 0.02 260 / 0.12);

    /* Typography – fluid */
    --vtg-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vtg-font-display: Inter, var(--vtg-font-sans);
    --vtg-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --vtg-text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 0.9375rem);
    --vtg-text-base: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
    --vtg-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    --vtg-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --vtg-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --vtg-text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
    --vtg-text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);

    /* Motion */
    --vtg-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --vtg-duration: 200ms;
    --vtg-duration-slow: 350ms;

    /* Focus ring – accessible */
    --vtg-focus-ring: 0 0 0 3px oklch(0.55 0.14 250 / 0.35);
  }

  /* Dark mode – first-class */
  @media (prefers-color-scheme: dark) {
    :root {
      --vtg-bg: oklch(0.16 0.015 260);
      --vtg-bg-elevated: oklch(0.20 0.015 260);
      --vtg-surface: oklch(0.22 0.015 260);
      --vtg-border: oklch(0.32 0.02 260);
      --vtg-text: oklch(0.93 0.01 250);
      --vtg-text-muted: oklch(0.72 0.02 250);
      --vtg-brand-subtle: oklch(0.28 0.06 250);
      --vtg-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
      --vtg-shadow: 0 4px 16px oklch(0 0 0 / 0.4);
      --vtg-shadow-lg: 0 16px 40px oklch(0 0 0 / 0.5);
    }
  }

  /* Manual dark class support (for future toggle) */
  .vtg-dark {
    --vtg-bg: oklch(0.16 0.015 260);
    --vtg-bg-elevated: oklch(0.20 0.015 260);
    --vtg-surface: oklch(0.22 0.015 260);
    --vtg-border: oklch(0.32 0.02 260);
    --vtg-text: oklch(0.93 0.01 250);
    --vtg-text-muted: oklch(0.72 0.02 250);
    --vtg-brand-subtle: oklch(0.28 0.06 250);
  }
}

/* --------------------------------------------------------------------------
   3. Base enhancements (soft minimalism + accessibility)
   -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    font-family: var(--vtg-font-sans);
    font-size: var(--vtg-text-base);
    line-height: 1.6;
    color: var(--vtg-text);
    background-color: var(--vtg-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Modern focus visible */
  :focus-visible {
    outline: none;
    box-shadow: var(--vtg-focus-ring);
  }

  /* Selection */
  ::selection {
    background: oklch(0.55 0.14 250 / 0.25);
    color: inherit;
  }

  /* Better media defaults */
  img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Quiet links */
  a {
    color: var(--vtg-brand);
    text-underline-offset: 0.15em;
    transition: color var(--vtg-duration) var(--vtg-ease);
  }
  a:hover {
    color: var(--vtg-brand-hover);
  }
}

/* --------------------------------------------------------------------------
   4. Component polish (progressive)
   -------------------------------------------------------------------------- */
@layer components {
  /* Soft cards – modern quiet UI */
  .vtg-card,
  .box-shadow,
  .has-hover {
    border-radius: var(--vtg-radius);
    transition: box-shadow var(--vtg-duration) var(--vtg-ease),
                transform var(--vtg-duration) var(--vtg-ease);
  }

  /* Buttons – refined */
  .button,
  .button.primary,
  button[type="submit"] {
    border-radius: var(--vtg-radius-sm);
    transition: background-color var(--vtg-duration) var(--vtg-ease),
                transform 120ms var(--vtg-ease),
                box-shadow var(--vtg-duration) var(--vtg-ease);
  }
  .button:active,
  button[type="submit"]:active {
    transform: scale(0.98);
  }

  /* Form inputs – modern */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    border-radius: var(--vtg-radius-sm);
    border-color: var(--vtg-border);
    transition: border-color var(--vtg-duration) var(--vtg-ease),
                box-shadow var(--vtg-duration) var(--vtg-ease);
  }
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--vtg-brand);
    box-shadow: var(--vtg-focus-ring);
  }

  /* Header polish */
  .header-wrapper {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Skip link – better visibility */
  .skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 99999;
    padding: 0.75rem 1.25rem;
    background: var(--vtg-brand);
    color: white;
    border-radius: var(--vtg-radius-sm);
    box-shadow: var(--vtg-shadow-lg);
  }
}

/* --------------------------------------------------------------------------
   5. Utilities
   -------------------------------------------------------------------------- */
@layer utilities {
  .vtg-container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
  }

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

/* --------------------------------------------------------------------------
   6. View Transitions (progressive enhancement)
   -------------------------------------------------------------------------- */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.28s;
    animation-timing-function: var(--vtg-ease);
  }
}