/* Mario Stanković — Design tokens  (v2)
   Single source of truth for colour, type, spacing, radius, elevation.
   Colours derived from the Alipro "farbenschema.jpg" (warm → cool spectrum).

   v2 changes:
   • New playful accent  --ms-lemon (#FFD449) — warm yellow pendant to terracotta (not in the source image, brand-owned).
   • Neutral surfaces     --ms-surface (#FFFFFF) + --ms-desk (#E7E9EA) replace the beige cream as default ground.
   • Display face          Space Grotesk → Hanken Grotesk.
   • --ms-gradient-spectrum re-proportioned to the real, warm-weighted nesting (incl. midnight + core). */

:root {
  /* ---- Brand palette (spectrum cores, outer → inner) ---- */
  --ms-lemon:      #FFD449;  /* playful accent / highlight (v2) */
  --ms-terracotta: #EC6F41;  /* primary / signal        */
  --ms-amber:      #EB8F50;  /* warm secondary          */
  --ms-marigold:   #E9B15E;  /* gold accent             */
  --ms-sage:       #9FAF70;  /* calm / natural          */
  --ms-jade:       #4EA57B;  /* fresh / success         */
  --ms-petrol:     #216D7A;  /* cool / info             */
  --ms-navy:       #0E2D41;  /* deep / structure / TEXT */
  --ms-midnight:   #0E1E2B;  /* ink base (title/dark)   */
  --ms-core:       #071019;  /* deepest core            */

  /* ---- Tints (for soft fields, chips, fills) ---- */
  --ms-lemon-200:      #FFE9A3;
  --ms-terracotta-200: #F7CBB6;
  --ms-marigold-200:   #F6E2BB;
  --ms-jade-200:       #C6E4D3;
  --ms-petrol-200:     #BAD3D8;

  /* ---- Neutrals ---- */
  --ms-ink:      #0E2D41;  /* primary text = Navy (3rd-darkest) */
  --ms-ink-60:   #4C5A63;  /* secondary text          */
  --ms-ink-40:   #6E7C84;  /* muted / captions — cool navy-slate (no beige) */
  --ms-line:     rgba(14,45,65,.12);  /* @kind color */ /* hairlines / dividers — navy-tinted, never gray */
  --ms-surface:  #FFFFFF;  /* primary card / base surface — pure white ground */
  --ms-desk:     #FFFFFF;  /* canvas behind surfaces — white; colour comes from the bands, never gray */
  --ms-paper:    #FFFFFF;  /* legacy alias → white (beige retired) */
  --ms-paper-2:  #FFFFFF;  /* legacy alias → white (beige retired) */
  --ms-white:    #FFFFFF;

  /* ---- Semantic ---- */
  --ms-on-dark:      #FFFFFF;
  --ms-on-dark-70:   rgba(255,255,255,.76);
  --ms-on-light:     var(--ms-ink);
  --ms-primary:      var(--ms-terracotta);
  --ms-primary-600:  #D95E31;
  --ms-info:         var(--ms-petrol);
  --ms-success:      var(--ms-jade);
  --ms-warning:      var(--ms-amber);
  --ms-danger:       #C64A2C;

  /* ---- Signature gradients ---- */
  --ms-gradient-warm:  linear-gradient(135deg, var(--ms-lemon), var(--ms-terracotta));
  --ms-gradient-cool:  linear-gradient(135deg, var(--ms-jade), var(--ms-petrol));
  /* Real image proportions (measured from farbenschema.jpg): core high at top → warm terracotta at the foot, warm-weighted. */
  --ms-gradient-spectrum: linear-gradient(180deg,
      var(--ms-core) 5%, var(--ms-midnight) 7.5%, var(--ms-navy) 10%,
      var(--ms-petrol) 15%, var(--ms-jade) 22%, var(--ms-sage) 34%,
      var(--ms-marigold) 55%, var(--ms-amber) 82%, var(--ms-terracotta) 98%);

  /* ---- Typography ---- */
  --ms-font-display: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --ms-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ms-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --ms-w-regular: 400;   /* @kind font */
  --ms-w-medium:  500;   /* @kind font */
  --ms-w-bold:    700;   /* @kind font */
  --ms-w-xbold:   800;   /* @kind font */ /* v2: Hanken Extrabold for display headings */

  /* Type scale (rem, 16px base) — modular 1.250 (Major Third) */
  --ms-fs-display: 3.815rem;  /* hero / title         */
  --ms-fs-h1:      3.052rem;
  --ms-fs-h2:      2.441rem;
  --ms-fs-h3:      1.563rem;
  --ms-fs-lead:    1.25rem;
  --ms-fs-body:    1rem;
  --ms-fs-small:   0.8rem;
  --ms-fs-kicker:  0.8rem;     /* overline / eyebrow */

  --ms-lh-tight:  1.12;  /* @kind font */
  --ms-lh-snug:   1.3;   /* @kind font */
  --ms-lh-body:   1.6;   /* @kind font */
  --ms-tracking-kicker: 0.16em;  /* @kind font */

  /* ---- Spacing scale (8px grid, 4px fine step) ---- */
  --ms-1: 4px;  --ms-2: 8px;  --ms-3: 12px; --ms-4: 16px;
  --ms-5: 24px; --ms-6: 32px; --ms-7: 48px; --ms-8: 64px; --ms-9: 96px;

  /* ---- Radius (signature: generous rounding / squircle feel) ----
     v2 squircle surface scale: chip 20 · card 34 · panel 44 */
  --ms-r-sm: 8px;  --ms-r-md: 16px; --ms-r-lg: 28px; --ms-r-xl: 44px; --ms-r-pill: 999px;
  --ms-r-chip: 20px; --ms-r-card: 34px; --ms-r-panel: 44px;

  /* ---- Elevation (neutral shadows) ---- */
  --ms-shadow-sm: 0 1px 2px rgba(14,45,65,.08);
  --ms-shadow-md: 0 6px 18px rgba(14,45,65,.12);
  --ms-shadow-lg: 0 18px 44px rgba(14,45,65,.16);
  --ms-shadow-glow: 0 10px 30px rgba(236,111,65,.35);

  /* ---- Motion ---- */
  --ms-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ms-ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --ms-dur-fast: 140ms; /* @kind other */
  --ms-dur-base: 240ms; /* @kind other */
  --ms-dur-slow: 420ms; /* @kind other */

  /* ---- Slide geometry (16:9) ---- */
  --ms-slide-w: 1280px;  /* @kind spacing */
  --ms-slide-h: 720px;   /* @kind spacing */
  --ms-slide-pad: 72px;  /* @kind spacing */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ms-dur-fast: 0ms; /* @kind other */
    --ms-dur-base: 0ms; /* @kind other */
    --ms-dur-slow: 0ms; /* @kind other */
  }
}