/* ============================================================
   Automatenland Design System — production bundle
   Self-contained port of the claude.ai design-canvas tokens
   (_ds/automatenland-design-system-…/) so the branded front
   site (index.html, workshop.html) needs no canvas runtime.
   Source: DesignSync project "Vending academy pages".
   Order matters: @import (fonts) must come first.
   ============================================================ */

/* ---- Webfonts (Google Fonts stand-ins for the brand fonts) ----
   Space Grotesk → display · Hanken Grotesk → body · JetBrains Mono → mono */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ===================== Colors ===================== */
:root {
  --brand-50:  #FDF2F8;
  --brand-100: #FCE7F1;
  --brand-200: #FBCFE3;
  --brand-300: #F8A9CC;
  --brand-400: #F2729E;
  --brand-500: #DB2777; /* PRIMARY — the brand magenta */
  --brand-600: #C01C6A;
  --brand-700: #A01558;
  --brand-800: #7E1145;
  --brand-900: #5C0D33;

  --ink-950: #0B0B0F;
  --ink-900: #0E0E12;
  --ink-850: #16161C;
  --ink-800: #1D1D25;
  --ink-700: #2A2A34;
  --ink-600: #3C3C48;
  --ink-500: #585866;
  --ink-400: #7C7C8A;
  --ink-300: #A6A6B2;
  --ink-200: #CDCDD5;
  --ink-150: #DEDEE4;
  --ink-100: #ECECF0;
  --ink-50:  #F5F5F7;
  --ink-25:  #FAFAFB;
  --white:   #FFFFFF;

  --accent:            var(--brand-500);
  --accent-hover:      var(--brand-600);
  --accent-active:     var(--brand-700);
  --accent-contrast:   var(--white);
  --accent-soft:       var(--brand-50);
  --accent-soft-border:var(--brand-200);
  --accent-on-dark:    var(--brand-400);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-dark:  var(--white);
  --text-on-dark-muted: var(--ink-300);
  --text-on-accent:var(--white);
  --text-link:     var(--brand-600);

  --surface-page:    var(--ink-25);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-50);
  --surface-raised:  var(--white);
  --surface-dark:    var(--ink-900);
  --surface-darker:  var(--ink-950);
  --surface-code:    var(--ink-900);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-150);
  --border-strong:  var(--ink-300);
  --border-on-dark: rgba(255,255,255,0.12);

  --focus-ring: var(--brand-500);
}

/* ===================== Typography ===================== */
:root {
  --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, monospace;

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

  --fs-display-xl: clamp(2.75rem, 6vw, 5rem);
  --fs-display-lg: clamp(2.25rem, 4.6vw, 3.75rem);
  --fs-display-md: clamp(1.875rem, 3.4vw, 2.75rem);
  --fs-display-sm: clamp(1.5rem, 2.4vw, 2rem);

  --fs-2xl: 1.5rem;
  --fs-xl:  1.25rem;
  --fs-lg:  1.125rem;
  --fs-md:  1rem;
  --fs-sm:  0.875rem;
  --fs-xs:  0.75rem;
  --fs-2xs: 0.6875rem;

  --fs-stat: clamp(2.5rem, 4.2vw, 4rem);

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-heading: 1.28;
  --lh-body:    1.6;
  --lh-relaxed: 1.72;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.22em;
  --ls-mono:    0.01em;

  --text-eyebrow-size: var(--fs-2xs);
  --text-eyebrow-track: var(--ls-eyebrow);
}

/* ===================== Spacing / radii / shadows / motion / layout ===================== */
:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill:999px;

  --border-width: 1px;
  --border-width-strong: 1.5px;

  --shadow-xs: 0 1px 2px rgba(14,14,18,0.06);
  --shadow-sm: 0 1px 3px rgba(14,14,18,0.08), 0 1px 2px rgba(14,14,18,0.04);
  --shadow-md: 0 4px 12px rgba(14,14,18,0.08), 0 2px 4px rgba(14,14,18,0.04);
  --shadow-lg: 0 12px 32px rgba(14,14,18,0.10), 0 4px 8px rgba(14,14,18,0.05);
  --shadow-xl: 0 24px 60px rgba(14,14,18,0.14);
  --shadow-accent: 0 8px 24px rgba(219,39,119,0.28);
  --shadow-accent-sm: 0 2px 8px rgba(219,39,119,0.22);
  --ring: 0 0 0 3px rgba(219,39,119,0.35);

  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --dur-scan:   1100ms;

  --container-sm:  640px;
  --container-md:  840px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --container-2xl:1440px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* ===================== Base + brand text roles ===================== */
*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

code, pre, kbd, samp { font-family: var(--font-mono); }

/* The branded front pages opt out of the default link underline. */
a { color: inherit; text-decoration: none; }

::selection { background: var(--brand-200); color: var(--ink-900); }

.al-display { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.al-stat { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-stat); line-height: 1; letter-spacing: var(--ls-display); color: var(--text-strong); font-feature-settings: "tnum" 1; }
.al-mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }

/* -------- Eyebrow (port of the design-system Eyebrow component) --------
   Uppercase, tracked, accent label with a small crosshair "tick" mark. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-eyebrow-size);
  letter-spacing: var(--text-eyebrow-track);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--on-dark { color: var(--accent-on-dark); }
.eyebrow .eyebrow-tick { flex: 0 0 auto; display: block; }

/* -------- Focus visibility -------- */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Mobile navigation (hamburger) ---------------------------------------
   The header nav carries an inline style="display:flex..." attribute, so the
   per-page @media rule .topnav{display:none} never wins. Override it here with
   !important and turn the nav into a toggled dropdown on small screens. */
.nav-toggle{display:none;background:none;border:0;font-size:26px;line-height:1;color:var(--text-strong);cursor:pointer;padding:4px 8px;-webkit-tap-highlight-color:transparent;}
@media(max-width:560px){
  .nav-toggle{display:block !important;}
  header > div{position:relative;}
  .topnav{
    display:none !important;
    position:absolute;top:calc(100% + 1px);right:0;left:0;
    flex-direction:column !important;align-items:stretch !important;gap:0 !important;
    background:#fff;border-top:1px solid var(--border-subtle);
    box-shadow:0 16px 34px rgba(0,0,0,.12);padding:6px 0;
  }
  .topnav.open{display:flex !important;}
  .topnav .nav-link{padding:13px var(--gutter) !important;font-size:13px;border-bottom:1px solid rgba(0,0,0,.05);}
  .topnav .nav-link:last-child{border-bottom:0;}
}