/* =========================================================
   ATE Blechbearbeitung – Design-Tokens
   Reihenfolge: Primitive → Skalen → Rollen → Themes → Dekor
   Komponenten nutzen nur Rollen, Skalen und Dekor-Tokens.
   ========================================================= */

@layer reset, tokens, base, layout, components, utilities, overrides;

/* Figtree Variable, lokal (OFL). Latin wird vorgeladen, Latin Extended nur bei Bedarf. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallback an Figtree angeglichen (Breite und Zeilenmaße), damit der Font-Wechsel nichts verschiebt */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial");
  size-adjust: 100.55%;
  ascent-override: 94.48%;
  descent-override: 24.86%;
  line-gap-override: 0%;
}

@layer tokens {
  :root {
    /* ---------- 1. Primitive (nur hier stehen Farbwerte) ---------- */

    /* Neutrale Grautöne */
    --adm-neutral-0: oklch(100% 0 0);
    --adm-neutral-50: oklch(97.61% 0 0);
    --adm-neutral-100: oklch(96.42% 0 0);
    --adm-neutral-200: oklch(84.52% 0 0);
    --adm-neutral-300: oklch(76.04% 0 0);
    --adm-neutral-400: oklch(69.27% 0 0);
    --adm-neutral-500: oklch(59.31% 0 0);
    --adm-neutral-600: oklch(47.48% 0 0);
    --adm-neutral-700: oklch(38.67% 0 0);
    --adm-neutral-800: oklch(25.2% 0 0);
    --adm-neutral-900: oklch(17.76% 0 0);
    --adm-neutral-1000: oklch(0% 0 0);

    /* Brand: kühles Schiefer-/Nachtblau */
    --adm-brand-100: oklch(91.92% 0.0198 270.2);
    --adm-brand-300: oklch(73.3% 0.0329 263.5);
    --adm-brand-400: oklch(67.26% 0.0282 266.5);
    --adm-brand-500: oklch(47.2% 0.0136 252.2);
    --adm-brand-600: oklch(32.35% 0.012 258.4);
    --adm-brand-700: oklch(22.32% 0.0182 270.5);
    --adm-brand-800: oklch(19.84% 0.027 270.7);
    --adm-brand-900: oklch(15.98% 0.0132 270.5);
    --adm-brand-950: oklch(12.29% 0.0108 271.4);

    /* Akzent: Gelb bis Laser-Orange */
    --adm-accent-50: oklch(96.13% 0.107 103.1);
    --adm-accent-100: oklch(90.76% 0.0444 95.9);
    --adm-accent-400: oklch(86.34% 0.1598 95);
    --adm-accent-500: oklch(84.59% 0.1575 82.2);
    --adm-accent-700: oklch(69.68% 0.2006 40.8);
    --adm-accent-900: oklch(61.32% 0.0421 99.3);

    /* Status (aktuell nur für den Kleinanzeigen-Hinweis genutzt) */
    --adm-success: oklch(88.03% 0.2264 145.6);

    /* ---------- 2. Skalen ---------- */

    /* Schrift */
    --adm-font-sans: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --adm-weight-regular: 400;
    --adm-weight-medium: 500;
    --adm-weight-semibold: 600;
    --adm-weight-bold: 700;
    --adm-weight-black: 900;

    --adm-text-3xs: 0.6875rem;
    --adm-text-2xs: 0.75rem;
    --adm-text-xs: 0.8125rem;
    --adm-text-sm: 0.875rem;
    --adm-text-md: 0.9375rem;
    --adm-text-base: 1rem;
    --adm-text-lg: 1.125rem;
    /* Fluid von 320 bis 2560 px Viewport */
    --adm-text-label: clamp(0.625rem, 0.6rem + 0.2vw, 0.875rem);
    --adm-text-xl: clamp(1.4rem, 1.3rem + 0.5vw, 2.1rem);
    --adm-text-2xl: clamp(2.8rem, 2.714rem + 0.429vw, 3.4rem);
    /* Maximum wie bisher: Die Inhaltsbreite wächst nicht über 81.25rem, größer bräche die Hero-Zeile um */
    --adm-text-display: clamp(2.8rem, 1.98rem + 2.2vw, 4.75rem);

    --adm-leading-tight: 1.03;
    --adm-leading-snug: 1.2;
    --adm-leading-body: 1.5;
    --adm-leading-loose: 1.6;

    --adm-tracking-tight: -0.02em;
    --adm-tracking-wide: 0.06em;
    --adm-tracking-caps: 0.12em;
    --adm-tracking-caps-wide: 0.16em;

    /* Abstände: n × 0.25rem */
    --adm-space-1: 0.25rem;
    --adm-space-2: 0.5rem;
    --adm-space-3: 0.75rem;
    --adm-space-4: 1rem;
    --adm-space-5: 1.25rem;
    --adm-space-6: 1.5rem;
    --adm-space-7: 1.75rem;
    --adm-space-8: 2rem;
    --adm-space-10: 2.5rem;
    --adm-space-12: 3rem;
    --adm-space-16: 4rem;
    --adm-space-20: 5rem;

    /* Layout */
    --adm-section-y: clamp(6rem, 5.43rem + 2.857vw, 10rem);
    --adm-gutter: clamp(1.25rem, 1.1rem + 0.5vw, 2rem);
    --adm-container: 81.25rem;
    --adm-measure: 65ch;
    --adm-header-h: 4.375rem;

    /* Radius */
    --adm-radius-sm: 0.25rem;
    --adm-radius-md: 0.5rem;
    --adm-radius-lg: 1rem;
    --adm-radius-round: 999px;

    /* Bewegung (auch Lenis liest --adm-duration-scroll) */
    --adm-duration-fast: 180ms;
    --adm-duration-base: 200ms;
    --adm-duration-slow: 400ms;
    --adm-duration-scroll: 1100ms;
    --adm-ease-standard: ease;
    --adm-ease-out: ease-out;
    --adm-ease-in-out: ease-in-out;

    /* Ebenen */
    --adm-z-raised: 1;
    --adm-z-float: 3;
    --adm-z-header: 100;
    --adm-z-banner: 200;

    /* ---------- 3. Rollen (pro Theme über light-dark()) ---------- */

    --adm-surface: light-dark(var(--adm-neutral-0), var(--adm-neutral-900));
    --adm-surface-raised: light-dark(var(--adm-neutral-0), color-mix(in oklch, var(--adm-neutral-0) 6%, transparent));
    --adm-surface-sunken: light-dark(var(--adm-neutral-100), color-mix(in oklch, var(--adm-neutral-1000) 35%, transparent));

    --adm-text: light-dark(var(--adm-neutral-900), var(--adm-neutral-100));
    --adm-text-strong: light-dark(var(--adm-neutral-1000), var(--adm-neutral-0));
    --adm-text-muted: light-dark(var(--adm-neutral-600), color-mix(in oklch, var(--adm-neutral-0) 72%, transparent));
    /* Auf Hell eine Stufe dunkler, damit kleine Labels 4,5:1 erreichen */
    --adm-text-accent: light-dark(var(--adm-brand-500), var(--adm-brand-400));

    --adm-border: light-dark(color-mix(in oklch, var(--adm-brand-800) 8%, transparent), color-mix(in oklch, var(--adm-neutral-0) 12%, transparent));

    --adm-accent: var(--adm-accent-400);
    --adm-accent-hover: var(--adm-accent-500);
    --adm-accent-contrast: var(--adm-neutral-1000);
    --adm-accent-subtle: color-mix(in oklch, var(--adm-accent-400) 22%, transparent);

    /* Gelb hat auf Weiß nur 1,5:1, daher auf Hell Nachtblau */
    --adm-focus: light-dark(var(--adm-brand-800), var(--adm-accent-400));

    /* Abstufungen der Rollen */
    --adm-text-soft: color-mix(in oklch, var(--adm-text-strong) 82%, transparent);
    --adm-text-subtle: light-dark(var(--adm-neutral-600), color-mix(in oklch, var(--adm-neutral-0) 60%, transparent));
    --adm-border-strong: color-mix(in oklch, var(--adm-text-strong) 20%, transparent);
    /* Formularfelder brauchen 3:1 zum Hintergrund (WCAG 1.4.11) */
    --adm-border-field: var(--adm-neutral-500);
    --adm-surface-glass: light-dark(color-mix(in oklch, var(--adm-neutral-0) 70%, transparent), color-mix(in oklch, var(--adm-neutral-1000) 70%, transparent));
    --adm-surface-floating: color-mix(in oklch, var(--adm-brand-900) 92%, transparent);

    /* Auf Bildern und dunklen Overlays (theme-unabhängig) */
    --adm-on-media: color-mix(in oklch, var(--adm-neutral-0) 90%, transparent);
    --adm-on-media-muted: color-mix(in oklch, var(--adm-neutral-0) 30%, transparent);
    --adm-media-overlay: color-mix(in oklch, var(--adm-neutral-1000) 35%, transparent);

    /* Schatten */
    --adm-shadow-color: light-dark(color-mix(in oklch, var(--adm-brand-800) 8%, transparent), color-mix(in oklch, var(--adm-neutral-1000) 45%, transparent));
    --adm-shadow-color-strong: light-dark(color-mix(in oklch, var(--adm-brand-800) 12%, transparent), color-mix(in oklch, var(--adm-neutral-1000) 45%, transparent));
    --adm-shadow-sm: 0 1px 4px color-mix(in oklch, var(--adm-neutral-1000) 50%, transparent);
    --adm-shadow-md: 0 1.125rem 2.5rem var(--adm-shadow-color);
    --adm-shadow-lg: 0 1.5rem 3.25rem var(--adm-shadow-color-strong);
    --adm-shadow-text: 0 2px 3px color-mix(in oklch, var(--adm-neutral-1000) 70%, transparent);

    /* ---------- 5. Dekor: Verläufe und Metall-Effekte aus Primitiven ---------- */

    --adm-gradient-hero: radial-gradient(circle at top, var(--adm-brand-700) 0, var(--adm-brand-800) 55%, var(--adm-brand-950) 100%);
    --adm-gradient-light: linear-gradient(var(--adm-neutral-0), var(--adm-neutral-200));
    --adm-gradient-deep: linear-gradient(var(--adm-brand-900), var(--adm-brand-950));
    --adm-gradient-footer-glow: radial-gradient(circle at top, color-mix(in oklch, var(--adm-neutral-0) 6%, transparent), transparent 55%);
    --adm-gradient-menu: linear-gradient(to top, light-dark(var(--adm-neutral-200), var(--adm-neutral-1000)), light-dark(var(--adm-neutral-0), var(--adm-neutral-800)));

    --adm-gradient-accent:
      radial-gradient(circle at 0 0, color-mix(in oklch, var(--adm-accent-50) 18%, transparent), transparent 50%),
      linear-gradient(90deg, var(--adm-accent-400), color-mix(in oklch, var(--adm-accent-500) 82%, transparent));
    --adm-gradient-ghost: radial-gradient(circle at 0 0, color-mix(in oklch, var(--adm-neutral-0) 9%, transparent), transparent 55%);
    --adm-ghost-text: var(--adm-brand-100);
    --adm-ghost-border: color-mix(in oklch, var(--adm-brand-300) 50%, transparent);

    --adm-gradient-card-glow: radial-gradient(circle at top left, light-dark(color-mix(in oklch, var(--adm-neutral-400) 19%, transparent), color-mix(in oklch, var(--adm-accent-100) 14%, transparent)), transparent 55%);
    --adm-gradient-pill: linear-gradient(to right, light-dark(color-mix(in oklch, var(--adm-neutral-100) 87%, transparent), color-mix(in oklch, var(--adm-neutral-0) 8%, transparent)), light-dark(var(--adm-neutral-50), color-mix(in oklch, var(--adm-neutral-0) 5%, transparent)));
    --adm-pill-border: light-dark(var(--adm-neutral-0), color-mix(in oklch, var(--adm-neutral-0) 12%, transparent));
    --adm-gradient-media: radial-gradient(circle at top, color-mix(in oklch, var(--adm-neutral-0) 10%, transparent), transparent);

    /* Hexagon-Beschriftung: auf hellen Sektionen dunkel, auf dunklen hell */
    --adm-gradient-hex-label: radial-gradient(circle at 0 0, light-dark(var(--adm-neutral-600), color-mix(in oklch, var(--adm-neutral-0) 92%, transparent)), light-dark(color-mix(in oklch, var(--adm-neutral-900) 75%, transparent), color-mix(in oklch, var(--adm-neutral-0) 92%, transparent)) 100%);
    --adm-hex-label-text: light-dark(var(--adm-neutral-0), color-mix(in oklch, var(--adm-neutral-1000) 90%, transparent));
    --adm-hex-label-border: var(--adm-neutral-400);
    --adm-hex-label-shadow: light-dark(color-mix(in oklch, var(--adm-neutral-1000) 60%, transparent), transparent);

    /* Gebürstetes Metall: Hexagon-Rahmen und Laser-Platte im Hero */
    --adm-gradient-metal-hex:
      radial-gradient(circle at 10% 0%, color-mix(in oklch, var(--adm-brand-100) 69%, transparent), transparent 55%),
      radial-gradient(circle at 90% 100%, color-mix(in oklch, var(--adm-neutral-400) 67%, transparent), transparent 60%),
      linear-gradient(115deg, color-mix(in oklch, var(--adm-neutral-200) 49%, transparent) 0%, color-mix(in oklch, var(--adm-brand-500) 62%, transparent) 40%, color-mix(in oklch, var(--adm-neutral-800) 65%, transparent) 100%);
    --adm-hex-border: var(--adm-neutral-700);
    --adm-gradient-metal-plate:
      radial-gradient(circle at 10% 0%, color-mix(in oklch, var(--adm-neutral-0) 77%, transparent), transparent 55%),
      radial-gradient(circle at 90% 100%, color-mix(in oklch, var(--adm-neutral-500) 67%, transparent), transparent 60%),
      linear-gradient(115deg, var(--adm-accent-900) 0%, var(--adm-brand-500) 40%, var(--adm-brand-600) 100%);
    --adm-plate-border: color-mix(in oklch, var(--adm-neutral-0) 14%, transparent);
    --adm-shadow-plate:
      0 0.9375rem 3.75rem color-mix(in oklch, var(--adm-neutral-1000) 95%, transparent),
      inset 0 1px 0 color-mix(in oklch, var(--adm-neutral-0) 6%, transparent);

    /* Laser-Animation */
    --adm-laser-start: var(--adm-accent-400);
    --adm-laser-mid: color-mix(in oklch, var(--adm-accent-500) 82%, transparent);
    --adm-laser-end: var(--adm-accent-700);
    --adm-laser-glow: var(--adm-accent-500);
    --adm-laser-outline: color-mix(in oklch, var(--adm-neutral-300) 65%, transparent);
    --adm-duration-laser: 3.5s;

    /* Logo */
    --adm-logo-accent: var(--adm-neutral-300);
    --adm-logo-accent-2: var(--adm-accent-400);

    /* Social-Icons im Mobilmenü: folgen dem Menü-Theme */
    --adm-icon-social: var(--adm-text-muted);

    /* Hinweis-Label der Kleinanzeigen-Karte */
    --adm-partner-label: color-mix(in oklch, var(--adm-success) 65%, transparent);
  }

  /* ---------- 4. Themes ---------- */
  :root { color-scheme: light; }
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }
}