/* ==========================================================================
   PRINTEREI – DESIGN TOKENS
   --------------------------------------------------------------------------
   The ONE source of truth for the whole website.
   Rule: no other CSS file may contain raw colors, font sizes, radii,
   shadows or durations. Everything else uses var(--…) from here.
   Allowed literals outside this file: 0, 1px hairlines, 100%, percentages.
   ========================================================================== */

:root {
	/* ----------------------------------------------------------------------
	   1. Raw palette (do not use directly in components – use section 2)
	   ---------------------------------------------------------------------- */

	/* Brand red */
	--c-red-50:  #FDEBEC;
	--c-red-100: #F9CFD0;
	--c-red-500: #E31E24;   /* logo red */
	--c-red-600: #C4161C;
	--c-red-700: #A11217;

	/* Brand teal */
	--c-teal-50:  #E6F1F1;
	--c-teal-100: #CDE3E4;
	--c-teal-300: #8BBEC1;
	--c-teal-500: #045B62;   /* logo teal */
	--c-teal-600: #034A50;
	--c-teal-700: #02393E;
	--c-teal-900: #0A2A2D;

	/* CMYK accents – the print-shop signature colors */
	--c-cyan-50:  #E3F5FD;
	--c-cyan-500: #009FE3;
	--c-cyan-700: #00719F;
	--c-magenta-50:  #FDE7F2;
	--c-magenta-500: #E6007E;
	--c-magenta-700: #A30059;
	--c-yellow-50:  #FFF7D1;
	--c-yellow-500: #FFD400;
	--c-yellow-800: #7A6200;
	/* K = Key (process black) – the fourth CMYK color */
	--c-key-50:  #EDEDEC;
	--c-key-900: #1D1D1B;

	/* Light green: «Offerte anfragen» and open tasks in the customer account */
	--c-lime-400: #BADD00;

	/* Neutrals (slightly teal-tinted so they sit well with the brand) */
	--c-white:    #FFFFFF;
	--c-gray-25:  #F9FBFB;

	/* Soft "mist" neutrals for the calmer shop pages (cart, checkout, account) */
	--c-mist-25:  #FAFBFB;
	--c-mist-75:  #EDF0EF;
	--c-mist-150: #DDE3E2;
	--c-mist-250: #CDD5D4;
	--c-gray-850: #1E2928;

	--c-gray-50:  #F3F6F6;
	--c-gray-100: #E7ECEC;
	--c-gray-200: #D3DCDB;
	--c-gray-400: #8E9C9B;
	--c-gray-600: #4E5D5C;
	--c-gray-700: #374443;
	--c-gray-900: #142120;

	/* Paper swatches (configurator) */
	--c-paper-recycled: #EEE8DA;
	--c-paper-kraft:    #C9A57E;
	/* Card stocks of the live business card (Visitenkarten page) */
	--c-paper-natural:  #FBFAF4;   /* Munken, ungestrichen */
	--c-paper-offset:   #FDFDFB;
	--c-paper-recycled-white: #F3F1EB; /* Recyclingkarton weiss: off-white with fibres */
	--c-paper-film:     #F1F4F4;   /* folienkaschiert: soft film sheen */
	--c-paper-card-kraft: #B98E5F; /* kraft as a whole card (darker than the swatch) */
	--c-paper-fleck-dark: rgb(70 40 10 / 0.2);    /* border of the empty hint on kraft */
	--c-paper-sheen:      rgb(255 255 255 / 0.65);
	/* Paper surfaces: fine noise (SVG turbulence) instead of a visible dot pattern */
	--paper-fibres-recycled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.29 0 0 0 0 0.22 1.9 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--paper-fibres-kraft:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.14 0 0 0 0 0.04 2.2 0 0 0 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--paper-grain-natural:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.32 1.2 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* ----------------------------------------------------------------------
	   2. Semantic colors – use THESE in components
	   ---------------------------------------------------------------------- */
	--color-primary:        var(--c-red-500);
	--color-primary-hover:  var(--c-red-600);
	--color-primary-active: var(--c-red-700);
	--color-primary-soft:   var(--c-red-50);
	--color-primary-text:   var(--c-red-600);   /* small red text (≥ 4.5:1 on all light surfaces) */
	--color-on-primary:     var(--c-white);

	--color-secondary:        var(--c-teal-500);
	--color-secondary-hover:  var(--c-teal-600);
	--color-secondary-active: var(--c-teal-700);
	--color-secondary-soft:   var(--c-teal-50);
	--color-on-secondary:     var(--c-white);

	--color-text:        var(--c-gray-900);
	--color-text-muted:  var(--c-gray-600);
	--color-text-subtle: var(--c-gray-400); /* decorative only, never body text */
	--color-heading:     var(--c-gray-900);
	--color-link:        var(--c-teal-500);
	--color-link-hover:  var(--c-red-600);

	--color-bg:          var(--c-white);
	--color-surface:     var(--c-white);
	--color-surface-alt: var(--c-gray-50);
	--color-surface-sunk: var(--c-gray-100);
	--color-field:       var(--c-white); /* inputs, dropdowns */
	--color-dark:        var(--c-teal-900);
	--color-on-dark:     var(--c-white);
	--color-on-dark-muted: var(--c-teal-100);
	--color-on-dark-accent: var(--c-yellow-500);
	--color-on-dark-line:  rgb(255 255 255 / 0.18);
	--color-on-dark-surface: rgb(255 255 255 / 0.07);
	--color-overlay:       rgb(14 43 44 / 0.55);
	--color-header-glass:  rgb(255 255 255 / 0.92);

	--color-border:        var(--c-gray-100);
	--color-border-strong: var(--c-gray-200);
	--color-todo:          var(--c-lime-400);
	--color-on-todo:       var(--c-key-900);
	--color-focus:         var(--c-cyan-500);
	--color-success:       #12805C;
	--color-error:         var(--c-red-600);

	/* ----------------------------------------------------------------------
	   3. Typography – Inter (self-hosted, variable, optical sizing)
	   ---------------------------------------------------------------------- */
	--font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-2xs:  0.625rem;                                   /* 10 – logo subline only */
	--fs-xs:   0.8125rem;                                  /* 13 */
	--fs-sm:   0.875rem;                                   /* 14 */
	--fs-base: 1rem;                                       /* 16 */
	--fs-md:   1.0625rem;                                  /* 17 */
	--fs-lg:   1.1875rem;                                  /* 19 */
	--fs-xl:   1.375rem;                                   /* 22 */
	--fs-nav:  0.9375rem;                                  /* 15 – main menu */
	--fs-2xl:  clamp(1.625rem, 1.35rem + 1vw, 2.125rem);   /* 26 → 34 */
	--fs-3xl:  clamp(2rem, 1.5rem + 1.9vw, 2.875rem);      /* 32 → 46 */
	--fs-4xl:  clamp(2.375rem, 1.6rem + 3vw, 3.875rem);    /* 38 → 62 */

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    800;

	--lh-tight: 1.08;
	--lh-snug:  1.25;
	--lh-base:  1.6;

	--ls-tight:   -0.025em;
	--ls-snug:    -0.012em;
	--ls-normal:  0;
	--ls-eyebrow: 0.08em;
	--ls-wide:    0.24em;

	/* ----------------------------------------------------------------------
	   4. Spacing – 4px grid
	   ---------------------------------------------------------------------- */
	--space-1:  0.25rem;  /*  4 */
	--space-2:  0.5rem;   /*  8 */
	--space-3:  0.75rem;  /* 12 */
	--space-4:  1rem;     /* 16 */
	--space-5:  1.25rem;  /* 20 */
	--space-6:  1.5rem;   /* 24 */
	--space-8:  2rem;     /* 32 */
	--space-10: 2.5rem;   /* 40 */
	--space-12: 3rem;     /* 48 */
	--space-14: 3.5rem;   /* 56 */
	--space-16: 4rem;     /* 64 */
	--space-20: 5rem;     /* 80 */
	--space-24: 6rem;     /* 96 */

	--section-y:      clamp(4rem, 2.5rem + 5vw, 7rem);   /* 64 → 112 */
	--section-head-gap: clamp(2rem, 1.5rem + 1.5vw, 3rem);

	/* ----------------------------------------------------------------------
	   5. Layout
	   ---------------------------------------------------------------------- */
	--container:   1300px;
	--gutter:      clamp(1rem, 0.5rem + 2.5vw, 2rem);    /* 16 → 32 */
	--grid-gap:    var(--space-6);
	--header-top-h: 5rem;                                /* 80 – logo + search row (desktop) */
	--header-bar-h: 3.25rem;                             /* 52 – menu bar (desktop, stays sticky) */
	--header-h:    4.5rem;                               /* 72 – sticky height on small screens */
	--measure:     40rem;                                /* max line length for lead text */
	--logo-h:      2rem;                                 /* wordmark height (32px) */

	/* ----------------------------------------------------------------------
	   6. Radii – one scale, used everywhere
	   ---------------------------------------------------------------------- */
	--radius-xs:   6px;
	--radius-sm:   10px;
	--radius-md:   14px;
	--radius-lg:   20px;
	--radius-xl:   28px;
	--radius-pill: 999px;

	/* Component aliases – change here, changes everywhere */
	--radius-control: var(--radius-sm);   /* buttons, inputs, selects */
	--radius-card:    var(--radius-lg);   /* cards, panels */
	--radius-media:   var(--radius-lg);   /* images */
	--radius-tile:    var(--radius-md);   /* icon tiles */

	/* ----------------------------------------------------------------------
	   7. Controls (buttons + inputs share heights so they always line up)
	   ---------------------------------------------------------------------- */
	--control-h-sm: 2.5rem;   /* 40 */
	--control-h:    3rem;     /* 48 */
	--control-h-lg: 3.5rem;   /* 56 */
	--control-px-sm: var(--space-4);
	--control-px:    var(--space-6);
	--control-px-lg: var(--space-8);
	--control-border: 1.5px;
	--focus-ring: 0 0 0 3px var(--c-white), 0 0 0 5px var(--color-focus);

	/* Icons (Tabler, outline) */
	--icon-xs: 1rem;
	--icon-sm: 1.125rem;
	--icon-md: 1.5rem;
	--icon-lg: 2rem;
	--icon-stroke: 1.75;

	/* ----------------------------------------------------------------------
	   8. Elevation
	   ---------------------------------------------------------------------- */
	--shadow-xs: 0 1px 2px rgb(14 43 44 / 0.06);
	--shadow-sm: 0 2px 8px rgb(14 43 44 / 0.07), 0 1px 2px rgb(14 43 44 / 0.05);
	--shadow-md: 0 10px 28px rgb(14 43 44 / 0.10), 0 2px 6px rgb(14 43 44 / 0.05);
	--shadow-lg: 0 24px 56px rgb(14 43 44 / 0.16), 0 4px 12px rgb(14 43 44 / 0.06);
	--shadow-mockup: drop-shadow(0 var(--space-4) var(--space-4) rgb(14 43 44 / 0.2));
	--shadow-primary: 0 10px 24px rgb(227 30 36 / 0.28);
	--shadow-field:       0 6px 16px rgb(4 91 98 / 0.07);   /* active form field */
	--shadow-field-error: 0 6px 16px rgb(196 22 28 / 0.06);

	/* ----------------------------------------------------------------------
	   9. Motion
	   ---------------------------------------------------------------------- */
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-fast:    150ms;
	--dur-base:    250ms;
	--dur-slow:    450ms;
	--dur-reveal:  800ms;
	--reveal-shift: 24px;
	--stagger:     80ms;
	--hover-lift:  -4px;
	--field-lift:  -2px;   /* active form field (floating labels) */
	--dur-field:   350ms;  /* floating label: glide, border colour, lift */
	--dur-notch-open:  220ms; /* border gap opens … */
	--delay-notch:     120ms; /* … once the label is on its way */
	--dur-notch-close: 80ms;
	--slider-autoplay: 6500ms;  /* JS reads this value */
	--hero-step:       3000ms;  /* homepage box: time per picture */
	--dur-ring:        900ms;   /* homepage box: one turn of the ring */
	--marquee-speed: 40s;
	--dur-float:   14s;    /* decorative floating shapes */
	--dur-pulse:   2.4s;   /* pulsing dot */
	--dur-flip:    700ms;  /* live business card: turning to the back */
	--dur-sweep:   1600ms; /* KI loader: light sweeping over the card */
	--card-stage-h: clamp(16rem, 12rem + 10vw, 19rem); /* live business card: fixed stage height */
	--card-split-w: 27.5rem; /* wide screens: column of the live sheet and the price (options on the right) */
	--card-slim-h:  4.5rem;  /* smaller screens: the live sheet as a slim strip while scrolling */
	--card-side-top: calc(var(--space-4) + 1px); /* wide screens: gap between the menu bar (+ its hairline) and the stuck preview box */
	--box-pad:       var(--space-5); /* 1.3.40: 20 px inside every frame that remains (one frame per area) */
	--card-box-pad:  var(--box-pad); /* wide screens: inside the options box and the preview box */
	--card-sample-text-w: 8rem;      /* «Beispiel 1 von 4» when the sample switch opens */
	--card-styles-visible: 3.5;      /* wide screens: KI style tiles in view (wide formats), the rest scrolls */
	--card-style-min-w: 8.5rem;      /* upright formats: a style tile never gets narrower */
	/* Hilfslinien on the live card: what is cut off (striped), the cut, the safe area. */
	--guide-hatch: repeating-linear-gradient(135deg, rgb(230 0 126 / 0.55) 0 1px, transparent 1px 6px); /* 1.3.43: see-through – the design under it is part of the print file */
	--guide-line:  1.5px;
	--guide-halo:  2px;
	--shadow-card: 0 1px 2px rgb(14 43 44 / 0.12), 0 18px 40px -12px rgb(14 43 44 / 0.32); /* a card lying on the table */

	/* ----------------------------------------------------------------------
	   10. Layers
	   ---------------------------------------------------------------------- */
	--z-base:    1;
	--z-raised:  10;
	--z-header:  100;
	--z-overlay: 190;
	--z-drawer:  200;
}

/* --------------------------------------------------------------------------
   Accent themes – put one class on a component, it picks its colors from
   --accent / --accent-soft / --accent-ink / --accent-on.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Soft tone (shop pages): light grey page, off-white cards, white fields and
   slightly softer text – less glare than pure white everywhere.
   -------------------------------------------------------------------------- */
.tone-soft {
	--color-bg:            var(--c-mist-75);
	--color-surface:       var(--c-mist-25);
	--color-surface-alt:   var(--c-mist-75);
	--color-border:        var(--c-mist-150);
	--color-border-strong: var(--c-mist-250);
	--color-text:          var(--c-gray-850);
	--color-heading:       var(--c-gray-850);
}

.accent-red     { --accent: var(--c-red-500);     --accent-soft: var(--c-red-50);     --accent-ink: var(--c-red-600);     --accent-on: var(--c-white); }
.accent-teal    { --accent: var(--c-teal-500);    --accent-soft: var(--c-teal-50);    --accent-ink: var(--c-teal-500);    --accent-on: var(--c-white); }
.accent-cyan    { --accent: var(--c-cyan-500);    --accent-soft: var(--c-cyan-50);    --accent-ink: var(--c-cyan-700);    --accent-on: var(--c-white); }
.accent-magenta { --accent: var(--c-magenta-500); --accent-soft: var(--c-magenta-50); --accent-ink: var(--c-magenta-700); --accent-on: var(--c-white); }
.accent-key     { --accent: var(--c-key-900);     --accent-soft: var(--c-key-50);     --accent-ink: var(--c-key-900);     --accent-on: var(--c-white); }
.accent-yellow  { --accent: var(--c-yellow-500);  --accent-soft: var(--c-yellow-50);  --accent-ink: var(--c-yellow-800);  --accent-on: var(--c-gray-900); }