/* ==========================================================================
   Hellauer Metall — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for the visual identity ("Werkhalle Blau", taken
   from the old WordPress site — see .planned/project-brief.md).

   Two-tier system:
     1. Primitives — raw values (color ramps, scales).
     2. Semantic   — meaningful aliases components consume.

   Light only: the brief rules out a dark variant.
   ========================================================================== */

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

@layer tokens {
  :root {
    /* ----------------------------------------------------------------
       1. PRIMITIVES
       ---------------------------------------------------------------- */

    /* Neutral ramp — the old site's greys */
    --zinc-50:  #f7f8fa;
    --zinc-100: #eef1f5;
    --zinc-200: #e1e7ef;   /* steel-blue band */
    --zinc-300: #c9d1dc;
    --zinc-400: #9aa3ae;
    --zinc-500: #6b7280;
    --zinc-600: #555555;   /* FAQ divider */
    --zinc-700: #363636;   /* body text */
    --zinc-800: #262626;
    --zinc-900: #1b1b1b;   /* footer */
    --zinc-950: #000000;

    /* Brand blue ramp — #245CAA is the brand colour */
    --blue-50:  #eef3fa;
    --blue-100: #d7dcee;
    --blue-200: #b0bbde;
    --blue-300: #8598cc;
    --blue-400: #5d7bbb;
    --blue-500: #3a6cb3;
    --blue-600: #245caa;
    --blue-700: #234986;
    --blue-800: #1f3761;
    --blue-900: #1a2742;
    --blue-950: #131825;

    /* Logo colours (logo only) */
    --logo-blue:   #3c5c84;
    --logo-grey:   #545454;
    --logo-yellow: #fcbc00;

    --white: #ffffff;
    --black: #000000;

    /* Spacing — hybrid 4-then-doubling scale */
    --space-0:  0;
    --space-1:  0.25rem;   /*   4px */
    --space-2:  0.5rem;    /*   8px */
    --space-3:  0.75rem;   /*  12px */
    --space-4:  1rem;      /*  16px */
    --space-5:  1.5rem;    /*  24px */
    --space-6:  2rem;      /*  32px */
    --space-7:  3rem;      /*  48px */
    --space-8:  4rem;      /*  64px */
    --space-9:  6rem;      /*  96px */
    --space-10: 8rem;      /* 128px */
    --space-11: 12rem;     /* 192px */
    --space-12: 16rem;     /* 256px */

    /* Fluid type scale — measured on the old site (360 → 1400 px). */
    --text-xs:   0.8125rem;                                      /* 13px */
    --text-sm:   0.875rem;                                       /* 14px */
    --text-base: 1rem;                                           /* 16px body */
    --text-lg:   1.125rem;                                       /* 18px eyebrow, FAQ */
    --text-xl:   clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);       /* 18 → 24px h5 */
    --text-2xl:  clamp(1.3rem,   1.07rem + 1.03vw, 2rem);        /* 21 → 32px tile titles */
    --text-3xl:  clamp(1.5rem,   1.1rem + 1.8vw, 2.5rem);        /* 24 → 40px */
    --text-4xl:  clamp(1.73rem,  1.05rem + 3.06vw, 3.55rem);     /* 28 → 57px h2 */
    --text-5xl:  clamp(2.5rem,   1.65rem + 3.8vw, 4.74rem);      /* 40 → 76px hero */

    /* Line heights */
    --leading-tight:   1.1;
    --leading-snug:    1.3;
    --leading-normal:  1.7;
    --leading-relaxed: 1.8;

    /* Letter spacing */
    --tracking-tighter: -0.03em;
    --tracking-tight:  -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.03em;

    /* Font weights */
    --font-light:    400;   /* Manrope ships 400–700 here */
    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* Font families */
    --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    --font-display: var(--font-sans);

    /* Radii */
    --radius-none: 0;
    --radius-sm:   0.25rem;
    --radius-md:   0.375rem;
    --radius-lg:   0.625rem;   /* buttons, cards (10px) */
    --radius-xl:   1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 2px 20px rgb(0 0 0 / 0.1);   /* sticky header */
    --shadow-lg: 0 10px 30px -6px rgb(0 0 0 / 0.2);

    /* Overlays on photos */
    --overlay-hero: rgb(0 0 0 / 0.6);
    --overlay-tile: rgb(0 0 0 / 0.3);
    --overlay-tile-hover: rgb(0 0 0 / 0.4);
    --overlay-lightbox: rgb(10 14 22 / 0.94);
    --glass-light: rgb(255 255 255 / 0.12);
    --header-glass: rgb(0 0 0 / 0.35);

    /* Motion */
    --duration-fast:   150ms;
    --duration-normal: 300ms;
    --duration-slow:   700ms;   /* slide-in reveals */
    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --reveal-distance: 3rem;

    /* Layout */
    --container-narrow:  48rem;    /*  768px — legal / prose */
    --container-default: 85.375rem; /* 1366px — the old site's container */
    --container-wide:    90rem;    /* 1440px */
    --container-gutter:  clamp(0.75rem, 0.3rem + 2vw, 1.875rem);  /* 12 → 30px */
    --section-space:     clamp(3.75rem, 3.5rem + 0.75vw, 4.375rem); /* 60 → 70px */
    --header-height:     clamp(3.5rem, 3rem + 1.6vw, 4.375rem);    /* 56 → 70px */
    --edge-height:       4.1667vw;                                  /* band chevrons: 50px per 1200px, as on the old site */
    --hero-edge-height:  clamp(5rem, 3.5rem + 4vw, 7.5rem);        /* 80 → 120px */
    --tile-height:       18.75rem;   /* 300px — Leistungen bento row */
    --tile-gap:          1.25rem;    /*  20px */
    --card-media-height: 17.1875rem; /* 275px — project card photo */

    /* Breakpoints (reference only — @media uses literal values).
       --bp-sm: 480px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1280px; */

    /* ----------------------------------------------------------------
       2. SEMANTIC
       ---------------------------------------------------------------- */

    /* Surfaces */
    --color-bg:        var(--white);
    --color-bg-subtle: var(--zinc-200);   /* light steel-blue band */
    --color-bg-muted:  var(--zinc-100);
    --color-bg-inset:  var(--white);
    --color-bg-dark:   var(--zinc-900);   /* footer */

    /* Text */
    --color-text:           var(--zinc-700);
    --color-heading:        var(--black);
    --color-text-muted:     var(--zinc-600);
    --color-text-subtle:    var(--zinc-500);
    --color-text-on-accent: var(--white);
    --color-text-on-dark:   var(--white);
    --color-text-on-dark-muted: rgb(255 255 255 / 0.65);
    --color-border-on-dark:     rgb(255 255 255 / 0.6);

    /* Borders */
    --color-border:        var(--zinc-300);
    --color-border-strong: var(--zinc-600);

    /* Accent */
    --color-accent:       var(--blue-600);
    --color-accent-hover: var(--blue-700);
    --color-accent-fg:    var(--white);

    /* Feedback */
    --color-focus-ring:    var(--blue-600);
    --color-selection-bg:  var(--blue-100);
    --color-selection-fg:  var(--zinc-950);
    --color-danger:        #b42318;   /* 6.0:1 on white */
    --color-danger-bg:     #fef3f2;
    --color-success:       #067647;   /* 5.6:1 on white */
    --color-success-bg:    #ecfdf3;

    /* Form controls */
    --control-height: 3.25rem;
    --control-ring:   0 0 0 3px var(--blue-100);
    --map-grid:       rgb(36 92 170 / 0.08);   /* map placeholder grid lines */
  }

  /* ----------------------------------------------------------------
     3. WEB FONTS — self-hosted Manrope (OFL), latin subset
     ---------------------------------------------------------------- */

  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/manrope-400.woff2") format("woff2");
  }

  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/manrope-500.woff2") format("woff2");
  }

  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/manrope-600.woff2") format("woff2");
  }

  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/manrope-700.woff2") format("woff2");
  }
}