/* ─────────────────────────────────────────────────────────────────────────── */
/* Zing Design System — Base Tokens                                            */
/* Source: BRAND.md v1.0 · PALETTE.json · TYPE.json                           */
/* Owner: Design-System-Architect                                              */
/* DO NOT hardcode these values in components — always reference var(--*)      */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Color Primitives ──────────────────────────────────────────────────── */
  --color-void:      #0A0A0A;
  --color-acid:      #C8FF00;
  --color-paper:     #FAFAFA;
  --color-graphite:  #1E1E1E;
  --color-line:      #2A2A2A;
  --color-mute:      #7A7A7A;

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --surface-canvas:    var(--color-void);
  --surface-elevated:  var(--color-graphite);
  --surface-inset:     #141414;

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --text-default:   var(--color-paper);
  --text-muted:     var(--color-mute);
  --text-inverse:   var(--color-void);
  --text-accent:    var(--color-acid);

  /* ── Border ─────────────────────────────────────────────────────────────── */
  --border-subtle:  var(--color-line);      /* #2A2A2A — very low-contrast dividers */
  --border-default: #3A3A3A;               /* slightly more visible input borders */
  --border-focus:   var(--color-acid);

  /* ── Action ─────────────────────────────────────────────────────────────── */
  --action-primary-bg:      var(--color-acid);
  --action-primary-fg:      var(--color-void);
  --action-secondary-bg:    var(--color-graphite);
  --action-secondary-fg:    var(--color-paper);
  --action-ghost-fg:        var(--color-paper);
  --action-destructive-bg:  var(--color-graphite);
  --action-destructive-fg:  #FF4444;

  /* ── State ──────────────────────────────────────────────────────────────── */
  /* Zing uses a single signal color (acid). Non-color signals (icon, label)  */
  /* carry semantic meaning. See DESIGN_SYSTEM.md § 3.1 state disambiguation. */
  --state-signal:         var(--color-acid);
  --state-error-border:   #FF4444;
  --state-error-text:     #FF4444;
  --state-ready-border:   #44FF88;   /* only in order-card ready state */

  /* ── Tenant Slot ────────────────────────────────────────────────────────── */
  /* Overridden at [data-tenant] scope. See tokens/tenant-slots.css           */
  --tenant-accent:       var(--color-acid);
  --tenant-accent-fg:    var(--color-void);

  /* ── Spacing (4px base) ─────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radii ───────────────────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-pill: 9999px;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans: Söhne, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Söhne Mono", "SF Mono", "JetBrains Mono", Consolas, monospace;

  /* Scale */
  --type-hero:    96px;
  --type-display: 64px;
  --type-h1:      40px;
  --type-h2:      28px;
  --type-h3:      20px;
  --type-body:    16px;
  --type-small:   14px;
  --type-micro:   12px;

  /* Weights */
  --weight-buch:            400;
  --weight-halbfett:        600;
  --weight-kraftig:         700;
  --weight-dreiviertelfett: 750;
  --weight-fett:            800;
  --weight-stark:           900;

  /* Line Heights */
  --leading-hero:    0.94;
  --leading-display: 0.96;
  --leading-h1:      1.04;
  --leading-h2:      1.12;
  --leading-h3:      1.20;
  --leading-body:    1.50;
  --leading-small:   1.45;
  --leading-micro:   1.40;

  /* Letter Spacing */
  --tracking-hero:    -0.03em;
  --tracking-display: -0.025em;
  --tracking-h1:      -0.02em;
  --tracking-h2:      -0.015em;
  --tracking-h3:      -0.01em;
  --tracking-body:     0em;
  --tracking-micro:    0.04em;

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --duration-micro:   80ms;
  --duration-action: 160ms;
  --duration-surface: 240ms;
  --ease-zing: cubic-bezier(0.2, 0, 0, 1);

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  /* No shadows on type or marks. Only for floating UI surfaces.              */
  --shadow-float: 0 8px 32px 0 rgba(0, 0, 0, 0.64);
  --shadow-menu:  0 4px 16px 0 rgba(0, 0, 0, 0.48);

  /* ── Z-index Ladder ─────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-sticky: 10;
  --z-drawer: 20;
  --z-modal:  30;
  --z-toast:  40;
  --z-top:    50;

  /* ── Mobile — iOS safe area ─────────────────────────────────────────────── */
  /* Use var(--safe-bottom) for any fixed/sticky bottom UI (FAB, drawers, CTAs) */
  /* so content is not hidden behind the iOS home bar or Android nav bar.       */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);

}

/* ── Global reset additions ──────────────────────────────────────────────── */
/* Applied at the global level so components don't need to set box-sizing.    */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent horizontal scroll from any overflowing child at viewport edge */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}