Interface
Architecture.

// tailwind.config.ts — Design System Tokens
import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        // 1:1 Figma Variable Mapping
        primary: {
          DEFAULT: "#001F3F", // Navy — Brand
          50: "#E6EBF2",
          100: "#B3C2D9",
          900: "#001029",
        },
        surface: "#FFFFFF",
        foreground: "#000000",
      },
      spacing: {
        // 4px Base Grid System
        "grid-1": "4px",
        "grid-2": "8px",
        "grid-3": "12px",
        "grid-4": "16px",
        "grid-6": "24px",
        "grid-8": "32px",
        "grid-12": "48px",
        "grid-16": "64px",
      },
      fontSize: {
        // Typographic Scale (1.25 Ratio)
        "display-xl": ["clamp(3rem,8vw,7rem)", {
          lineHeight: "0.92",
          letterSpacing: "-0.03em",
          fontWeight: "900",
        }],
        "display-lg": ["clamp(2.4rem,6vw,5rem)", {
          lineHeight: "0.92",
          letterSpacing: "-0.025em",
          fontWeight: "900",
        }],
        "body": ["16px", {
          lineHeight: "1.625",
          letterSpacing: "0",
        }],
        "mono-xs": ["10px", {
          lineHeight: "1.4",
          letterSpacing: "0.4em",
          fontWeight: "700",
        }],
      },
      borderRadius: {
        // Design-Dogma: 0px border-radius
        none: "0px",
      },
    },
  },
};

export default config;

// components/ui/AccessibleSelect.tsx
"use client";
import { useState, useRef, useCallback } from "react";

interface Option {
  value: string;
  label: string;
}

interface Props {
  options: Option[];
  label: string;
  onChange: (value: string) => void;
}

export default function AccessibleSelect({
  options, label, onChange,
}: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(-1);
  const [selected, setSelected] = useState<Option | null>(null);
  const listRef = useRef<HTMLUListElement>(null);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      switch (e.key) {
        case "ArrowDown":
          e.preventDefault();
          setActiveIndex((prev) =>
            Math.min(prev + 1, options.length - 1)
          );
          break;
        case "ArrowUp":
          e.preventDefault();
          setActiveIndex((prev) => Math.max(prev - 1, 0));
          break;
        case "Enter":
        case " ":
          e.preventDefault();
          if (isOpen && activeIndex >= 0) {
            setSelected(options[activeIndex]);
            onChange(options[activeIndex].value);
            setIsOpen(false);
          } else {
            setIsOpen(true);
          }
          break;
        case "Escape":
          setIsOpen(false);
          break;
      }
    },
    [isOpen, activeIndex, options, onChange]
  );

  return (
    <div className="relative" onKeyDown={handleKeyDown}>
      <label
        id="select-label"
        className="text-mono-xs uppercase text-foreground/60"
      >
        {label}
      </label>
      <button
        role="combobox"
        aria-expanded={isOpen}
        aria-haspopup="listbox"
        aria-labelledby="select-label"
        aria-activedescendant={
          activeIndex >= 0
            ? `option-${activeIndex}`
            : undefined
        }
        onClick={() => setIsOpen(!isOpen)}
        className="w-full text-left border border-foreground
          px-grid-4 py-grid-3 focus-visible:outline-2
          focus-visible:outline-primary"
      >
        {selected?.label ?? "Bitte waehlen"}
      </button>

      {isOpen && (
        <ul
          ref={listRef}
          role="listbox"
          aria-labelledby="select-label"
          className="absolute w-full border border-foreground
            bg-surface z-50 mt-grid-1"
        >
          {options.map((option, index) => (
            <li
              key={option.value}
              id={`option-${index}`}
              role="option"
              aria-selected={selected?.value === option.value}
              className={`px-grid-4 py-grid-3 cursor-pointer
                ${index === activeIndex
                  ? "bg-primary text-surface"
                  : "hover:bg-primary/10"
                }`}
              onClick={() => {
                setSelected(option);
                onChange(option.value);
                setIsOpen(false);
              }}
            >
              {option.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// lib/motion-variants.ts
// Zentrale Animation-Variants fuer das gesamte Interface.
// prefers-reduced-motion wird auf Komponenten-Ebene respektiert.

export const fadeInUp = {
  hidden: {
    opacity: 0,
    y: 24,
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.6,
      ease: [0.25, 0.46, 0.45, 0.94], // easeOutQuad
    },
  },
  exit: {
    opacity: 0,
    y: -12,
    transition: { duration: 0.3 },
  },
};

export const staggerContainer = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.1,
    },
  },
};

export const scaleIn = {
  hidden: {
    opacity: 0,
    scale: 0.95,
  },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.4,
      ease: [0.25, 0.46, 0.45, 0.94],
    },
  },
};

export const slideInRight = {
  hidden: {
    opacity: 0,
    x: 40,
  },
  visible: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.5,
      ease: [0.25, 0.46, 0.45, 0.94],
    },
  },
};

// Reduced Motion: Sofortige Zustandswechsel
export const reducedMotion = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 0.01 },
  },
};

// Usage in Component:
// const prefersReduced =
//   window.matchMedia(
//     "(prefers-reduced-motion: reduce)"
//   ).matches;
//
// <motion.div
//   variants={prefersReduced ? reducedMotion : fadeInUp}
//   initial="hidden"
//   whileInView="visible"
//   viewport={{ once: true }}
// />