/* ============================================================================
   Maskinportal — Design tokens ("Dyb Mark": premium tech-agrarian).
   Single source of truth for color, type, spacing, motion.
   Rebrandable: swap the brand and accent ramps (+ Core/Constants/Branding.cs
   and the temporary logo/favicon assets) to reskin the whole site.

   NOTE: never write the asterisk-slash sequence inside a comment — it ends
   the comment early and CSS error recovery can swallow whole blocks.

   Cascade layers: globals live in layers; the scoped-CSS bundle is UN-layered
   and therefore always wins over these files.

   Breakpoints (rem, min-width) — use ONLY these four in media queries:
     sm 40rem (640px) · md 56rem (896px) · lg 64rem (1024px) · xl 80rem (1280px)
   ========================================================================= */
@layer tokens, base, components, utilities;

@layer tokens {

  /* ---- Self-hosted variable fonts (GDPR: no font CDN at runtime) ---- */
  @font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-latin-wght.woff2") format("woff2-variations");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  :root {
    /* ---- Brand — dyb mark (near-black green anchor #0C2015; vivid #17A86B) ---- */
    --brand-950: #07130D;
    --brand-900: #0C2015;   /* hero, footer, tech panels */
    --brand-800: #11301F;
    --brand-700: #0E4D2F;
    --brand-600: #0F7A4A;   /* links, focus — AA on white */
    --brand-500: #17A86B;   /* vivid accents, active indicators, never small text on light */
    --brand-400: #45BD8A;
    --brand-300: #82D4AF;
    --brand-200: #B8E7D2;
    --brand-100: #DCF3E8;
    --brand-050: #EFFAF5;

    /* ---- Accent — amber (fills + price; glowing CTA) ----
       Amber is a pigment, not an ink: 500 only as fill or as text on
       brand-800/900; accent TEXT on light surfaces uses accent-800. */
    --accent-800: #96660B;
    --accent-700: #B37B10;
    --accent-600: #DE9E22;
    --accent-500: #F2B33D;
    --accent-300: #F7CE7E;
    --accent-100: #FCEDCD;
    --accent-050: #FEF7E7;

    /* ---- Cool neutrals ---- */
    --ink-900: #101312;    /* næsten sort primary text */
    --ink-700: #3A423F;
    --ink-500: #5F6A66;    /* muted text — AA on bg and white */
    --ink-300: #A3ACA9;    /* disabled/placeholder only, never body text */
    --moss-500: #93A39B;   /* decorative only (icons, rivets, markers) */
    --moss-300: #C4CDC9;
    --line: #E4E7E6;
    --line-strong: #CDD3D1;
    --surface: #FFFFFF;    /* cards */
    --surface-2: #EFF2F1;  /* recessed panels, image placeholders */
    --bg: #F7F8F8;         /* kølig hvid page */

    /* ---- Dark surfaces (hero, footer, tech panel) ---- */
    --dark-surface: #0C2015;
    --dark-surface-2: #11301F;
    --dark-line: rgba(233, 242, 237, 0.12);
    --dark-text: #E9F2ED;
    --dark-muted: #A9BFB2;

    /* ---- Semantic (each with a -050 soft surface) ---- */
    --ok-600: #0F7A4A;     --ok-050: #E9F7F0;
    --warn-700: #7A5600;   --warn-050: #FBF3DF;
    --warn-600: #B37B10;
    --danger-600: #C23A2B; --danger-700: #8F2A1E; --danger-050: #FCEDEA;
    --info-600: #21667E;   --info-050: #E8F3F7;

    /* ---- Semantic aliases (consume these where meaning > hue) ---- */
    --color-text: var(--ink-900);
    --color-text-muted: var(--ink-500);
    --color-page: var(--bg);
    --color-surface: var(--surface);
    --color-border: var(--line);
    --color-link: var(--brand-600);
    --color-cta: var(--accent-500);
    --color-cta-text: var(--brand-950);
    --color-price: var(--accent-800);

    /* ---- Focus / interaction ---- */
    --focus: var(--brand-600);
    --focus-ring: 0 0 0 3px rgba(15, 122, 74, 0.35);

    /* ---- Typography (elderly-first: 18px floor for body copy) ---- */
    --font-sans: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
    --font-display: "Space Grotesk", "Segoe UI", system-ui, Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    --numeric-data: "tnum" 1, "lnum" 1;

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;   /* meta only, never body copy */
    --text-base: 1.125rem;  /* 18px */
    --text-lg: 1.25rem;
    --text-xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
    --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    --text-3xl: clamp(2.125rem, 1.7rem + 1.8vw, 3rem);
    --text-display: clamp(2.375rem, 1.9rem + 2.4vw, 3.75rem);
    --leading: 1.6;
    --leading-tight: 1.12;

    /* ---- Spacing scale ---- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-8: 3rem;     --sp-10: 4rem;
    --sp-12: 6rem;

    /* ---- Radius / shadow (sleek: soft radii, cool shadows, one glow) ---- */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgba(12, 32, 21, 0.05), 0 4px 12px rgba(12, 32, 21, 0.06);
    --shadow-2: 0 10px 30px rgba(12, 32, 21, 0.10);
    --shadow-3: 0 20px 50px rgba(12, 32, 21, 0.18);
    --shadow-glow: 0 8px 28px rgba(242, 179, 61, 0.35);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 350ms;
    --dur-hero: 600ms;

    /* ---- Z-index scale (#blazor-error-ui stays at 1000) ---- */
    --z-header: 40;
    --z-drawer: 60;
    --z-modal: 80;
    --z-toast: 90;
    --z-skip: 100;

    /* ---- Layout ---- */
    --container: 76rem;
    --container-narrow: 46rem;
    --container-wide: 88rem;
    --tap-min: 2.75rem;
    --header-h: 4.5rem;
  }
}