/*
 * KUKA AMP Design System
 * Source of truth: amp_cloud_frontend/src/shared/design/tokens/tokens.json
 * (CSS variables generated to tokens.css and consumed throughout the app.)
 *
 * Usage in HTML artifacts:
 *   <link rel="stylesheet" href="colors_and_type.css" />
 *   <h1 class="kuka-h1">Fleet Health</h1>
 *   <button class="kuka-btn-primary">Register Device</button>
 */

:root {
  /* ─────────────────────────────────────────────────────────────────────────
   * BRAND (the single most-recognisable mark of the brand is KUKA orange.
   * Use it sparingly: primary CTAs, active nav, single accent on a graph,
   * the second word of "KUKA AMP".)
   * ──────────────────────────────────────────────────────────────────────── */
  --kuka-orange:        #ff5800;
  --kuka-dark-blue:     #244b73;   /* primary text / brand wordmark */
  --kuka-blue:          #377aad;
  --kuka-light-blue:    #90c1f0;

  /* ─────────────────────────────────────────────────────────────────────────
   * NEUTRALS — flat industrial greys, no warm tints.
   * ──────────────────────────────────────────────────────────────────────── */
  --kuka-white:           #ffffff;
  --kuka-background-gray: #eaedf0;   /* app background behind cards */
  --kuka-light-gray:      #bfc1c3;   /* dividers, disabled icon */
  --kuka-mid-gray:        #93979a;   /* tertiary text, placeholder */
  --kuka-dark-gray:       #676c71;   /* secondary text, body icons */
  --kuka-border:          #e5e7eb;   /* card / table borders */

  /* ─────────────────────────────────────────────────────────────────────────
   * TRAFFIC LIGHTS — high-contrast safety colours used on telemetry &
   * "is the robot ok?" surfaces. Saturated, not pastel.
   * ──────────────────────────────────────────────────────────────────────── */
  --kuka-traffic-red:    #b40000;
  --kuka-traffic-yellow: #ffcd00;
  --kuka-traffic-green:  #00780a;

  /* ─────────────────────────────────────────────────────────────────────────
   * ACCENTS — applied to badges, charts, blockly toolbox icon tints.
   * Always paired with white via color-mix() for backgrounds. (See
   * `--badge-*` recipes below.)
   * ──────────────────────────────────────────────────────────────────────── */
  --kuka-green:        #37b24d;
  --kuka-yellow:       #fab005;
  --kuka-red:          #c72c40;
  --kuka-purple:       #6147b1;
  --kuka-sphere-pink:  #b80e80;
  --kuka-petrol-light: #80d6af;
  --kuka-petrol-dark:  #3c8c78;

  /* ─────────────────────────────────────────────────────────────────────────
   * ROBOT STATUS — direct mapping from telemetry tag → colour.
   * Used in DeviceList chips, map canvas dots, dashboard widgets.
   * ──────────────────────────────────────────────────────────────────────── */
  --status-working:       var(--kuka-green);
  --status-idle:          var(--kuka-blue);
  --status-charging:      var(--kuka-green);   /* green = actively-working (charging is part of normal duty) */
  --status-error:         var(--kuka-red);
  --status-disconnected:  var(--kuka-mid-gray);
  --status-mislocalized:  var(--kuka-yellow);
  --status-teleop:        #a855f7;

  /* ─────────────────────────────────────────────────────────────────────────
   * SEMANTIC text/surface — what components actually reach for.
   * Mirrors `--color-*` in src/app/index.css.
   * ──────────────────────────────────────────────────────────────────────── */
  --fg-primary:    var(--kuka-dark-blue);   /* headings, primary body */
  --fg-secondary:  var(--kuka-dark-gray);   /* body, table cells */
  --fg-tertiary:   var(--kuka-mid-gray);    /* hint, meta, placeholder */
  --fg-on-orange:  #ffffff;
  --bg-surface:    var(--kuka-white);
  --bg-page:       var(--kuka-background-gray);
  --bg-hover:      var(--kuka-background-gray);
  --border:        var(--kuka-border);

  /* ─────────────────────────────────────────────────────────────────────────
   * RADII — the system is FLAT. All radii normalize to 4px (`@theme`
   * declaration in src/app/index.css forces this). The only exception is
   * fully-pill chips and rounded-full status dots.
   * ──────────────────────────────────────────────────────────────────────── */
  --radius:      4px;
  --radius-pill: 9999px;

  /* ─────────────────────────────────────────────────────────────────────────
   * ELEVATION — almost flat. Cards rest on a 1px border + a barely-there
   * shadow. There are NO heavy drop shadows in the product chrome.
   * ──────────────────────────────────────────────────────────────────────── */
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-toolbar: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-popover: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-modal:   0 24px 48px rgba(15, 23, 42, 0.18);

  /* ─────────────────────────────────────────────────────────────────────────
   * SPACING — 4px base. Tailwind utilities used in app, listed for parity.
   * ──────────────────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ─────────────────────────────────────────────────────────────────────────
   * MOTION — 150-200ms, ease-out. Filter brightness for primary buttons,
   * background colour for secondary hover. No bounce, no "fun" easing.
   * ──────────────────────────────────────────────────────────────────────── */
  --duration-fast: 150ms;  /* @kind other */
  --duration-base: 200ms;  /* @kind other */
  --easing:        cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */

  /* ─────────────────────────────────────────────────────────────────────────
   * TYPE — the app uses the OS system stack. No web fonts ship.
   * (All typography decisions are font-weight + size; the family is
   * deliberately invisible.)
   * ──────────────────────────────────────────────────────────────────────── */
  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;

  /* Type scale — tracks what tailwind classes the codebase actually uses.
     Modular but tight; the product is data-dense and avoids hero typography
     except on the public Landing page. */
  --text-2xs:   10px;     /* uppercase eyebrow labels (WORKING, IDLE) */
  --text-xs:    12px;     /* meta, table chips */
  --text-sm:    14px;     /* default body in tables, panels, forms */
  --text-base:  16px;     /* default body in marketing & onboarding */
  --text-lg:    18px;
  --text-xl:    20px;     /* card titles, side-panel headings */
  --text-2xl:   24px;
  --text-3xl:   30px;     /* page titles in onboarding/empty-state */
  --text-5xl:   48px;     /* landing hero (sm:) */
  --text-7xl:   72px;     /* landing hero (md:) */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  --tracking-wide: 0.04em;   /* status chips */
  --tracking-eyebrow: 0.1em; /* vertical "ROBOT DETAILS" tab */
}

/* ─────────────────────────────────────────────────────────────────────────────
 * BASE
 * ─────────────────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-secondary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * TYPOGRAPHY — semantic classes mirroring how the codebase styles things.
 * (The app uses Tailwind utility soup; these classes condense the recurring
 * patterns into a single name for prototypes and slides.)
 * ─────────────────────────────────────────────────────────────────────────── */

.kuka-display {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--fg-on-orange); /* hero is on a dark image overlay */
}
.kuka-display .accent {
  background: linear-gradient(90deg, var(--kuka-orange), #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kuka-h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.kuka-h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}
.kuka-h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}
.kuka-h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--fg-primary);
}
.kuka-body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}
.kuka-body-lg {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}
.kuka-meta {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
}
.kuka-eyebrow {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-tertiary);
}
.kuka-mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: #f3f4f6;
  padding: 0.15em 0.35em;
  border-radius: var(--radius);
}
.kuka-link {
  color: var(--kuka-orange);
  text-decoration: none;
}
.kuka-link:hover { text-decoration: underline; }

/* The brand wordmark — KUKA in dark blue, AMP in orange. Used in nav,
   landing, and signed-out screens. */
.kuka-wordmark {
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--kuka-dark-blue);
}
.kuka-wordmark .amp { color: var(--kuka-orange); }

/* ─────────────────────────────────────────────────────────────────────────────
 * COMPONENT PRIMITIVES — the recurring ones. Tailwind-equivalents of
 * src/app/index.css `@utility` blocks plus a few shorthand chips.
 * ─────────────────────────────────────────────────────────────────────────── */

.kuka-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.kuka-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--kuka-orange);
  color: var(--fg-on-orange);
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: filter var(--duration-fast) var(--easing);
}
.kuka-btn-primary:hover  { filter: brightness(0.92); }
.kuka-btn-primary:active { filter: brightness(0.85); }
.kuka-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.kuka-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 15px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing);
}
.kuka-btn-secondary:hover { background: var(--bg-hover); }

.kuka-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--fg-tertiary);
  font-size: var(--text-sm);
  border: none; border-radius: var(--radius);
  padding: 6px 8px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing),
              color var(--duration-fast) var(--easing);
}
.kuka-btn-ghost:hover { background: #f3f4f6; color: var(--fg-primary); }

.kuka-input {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--text-sm);
  background: var(--bg-surface);
  color: var(--fg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--duration-fast),
              box-shadow var(--duration-fast);
}
.kuka-input:focus {
  border-color: var(--kuka-orange);
  box-shadow: 0 0 0 1px var(--kuka-orange);
}
.kuka-input::placeholder { color: var(--fg-tertiary); }

/* ── Status chips: white-tinted accent backgrounds, derived via color-mix.
   This is the canonical "badge formula" the codebase enforces — see the
   /fe-port-guide skill in the source repo. */
.kuka-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--fg-secondary);
  white-space: nowrap;
}
.kuka-chip--working {
  background: color-mix(in srgb, var(--kuka-green) 14%, white);
  border-color: color-mix(in srgb, var(--kuka-green) 35%, white);
  color: var(--kuka-traffic-green);
}
.kuka-chip--charging {
  background: color-mix(in srgb, var(--kuka-green) 14%, white);
  border-color: color-mix(in srgb, var(--kuka-green) 35%, white);
  color: var(--kuka-traffic-green);
}
.kuka-chip--idle {
  background: var(--bg-page);
  border-color: var(--border);
  color: var(--fg-secondary);
}
.kuka-chip--error {
  background: color-mix(in srgb, var(--kuka-red) 10%, white);
  border-color: color-mix(in srgb, var(--kuka-red) 30%, white);
  color: var(--kuka-red);
}
.kuka-chip--mislocalized {
  background: color-mix(in srgb, var(--kuka-yellow) 14%, white);
  border-color: color-mix(in srgb, var(--kuka-yellow) 35%, white);
  color: #b58300;
}
.kuka-chip--scheduled {
  background: color-mix(in srgb, var(--kuka-blue) 14%, white);
  border-color: color-mix(in srgb, var(--kuka-blue) 35%, white);
  color: var(--kuka-blue);
}
.kuka-chip--testing {
  background: color-mix(in srgb, var(--kuka-purple) 14%, white);
  border-color: color-mix(in srgb, var(--kuka-purple) 35%, white);
  color: var(--kuka-purple);
}

.kuka-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.kuka-dot--working      { background: var(--status-working); }
.kuka-dot--idle         { background: var(--status-idle); }
.kuka-dot--charging     { background: var(--status-charging); }
.kuka-dot--error        { background: var(--status-error); }
.kuka-dot--disconnected { background: var(--status-disconnected); }
.kuka-dot--mislocalized { background: var(--status-mislocalized); }