/* ═══════════════════════════════════════════════════════════════
   CNC Pro — Design Tokens & CSS Custom Properties
   variables.css
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════════════
     Grafana dark theme — play.grafana.org
     Engineering dashboard gold standard.
     Screenshot analysed 2026-04-27.
     ═══════════════════════════════════════════════ */

  /* ─── Background layers ─── */
  --bg-deep:      #111217;   /* Grafana page background */
  --bg-base:      #181b1f;   /* Grafana sidebar */
  --bg-panel:     #1e2128;   /* Grafana panel/card */
  --bg-raised:    #252930;   /* Grafana raised elements */
  --bg-overlay:   rgba(10, 11, 14, 0.90);
  --bg-hover:     rgba(255, 255, 255, 0.06);
  --bg-active:    rgba(255, 255, 255, 0.10);
  --bg-input:     #0d0e12;   /* Deepest — input fields */

  /* ─── Accent colors ─── */
  --accent:        #e94560;   /* CNC Pro brand — alias for --accent-red */
  --accent-red:    #e94560;   /* CNC Pro brand */
  --accent-blue:   #5794f2;   /* Grafana blue */
  --accent-green:  #73bf69;   /* Grafana green */
  --accent-orange: #ff9830;   /* Grafana orange */
  --accent-purple: #b877d9;   /* Grafana purple */
  --accent-cyan:   #56a9b3;
  --accent-yellow: #fade2a;   /* Grafana yellow */

  /* ─── Accent with opacity ─── */
  --accent-red-10:    rgba(233, 69,  96,  0.12);
  --accent-red-20:    rgba(233, 69,  96,  0.22);
  --accent-blue-10:   rgba(87, 148, 242, 0.12);
  --accent-blue-20:   rgba(87, 148, 242, 0.22);
  --accent-green-10:  rgba(115, 191, 105, 0.12);
  --accent-green-20:  rgba(115, 191, 105, 0.22);
  --accent-orange-10: rgba(255, 152, 48,  0.12);
  --accent-orange-20: rgba(255, 152, 48,  0.22);

  /* ─── Text — Grafana scale ─── */
  --text-primary:   #d8d9da;   /* Grafana primary */
  --text-secondary: #adadad;   /* Grafana secondary */
  --text-muted:     #6e7280;   /* Grafana muted */
  --text-disabled:  #464c54;
  --text-inverse:   #111217;
  --text-link:      #5794f2;
  --text-error:     #f2495c;
  --text-success:   #73bf69;
  --text-warning:   #ff9830;

  /* ─── Borders — Grafana visible panel edges ─── */
  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: #2c3235;   /* Grafana border */
  --border-strong:  #3d4347;
  --border-focus:   #5794f2;
  --border-error:   #f2495c;

  /* ─── Machine brand colors ─── */
  --machine-tenoly: #e94560;   /* Tenoly 208M — red */
  --machine-vmc:    #58a6ff;   /* VMC1000II — blue */

  /* ─── Status colors ─── */
  --status-draft:    #8b949e;
  --status-approved: #3fb950;
  --status-testing:  #f0883e;
  --status-archived: #484f58;

  /* ─── Severity colors ─── */
  --severity-error:  #f85149;
  --severity-warn:   #f0883e;
  --severity-info:   #58a6ff;

  /* ─── Shadows — tight, functional, no glow ─── */
  /* Engineering software: crisp drop shadows, no neon */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0,0,0,0.3);
  --shadow-md:  0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg:  0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 12px 36px rgba(0, 0, 0, 0.6);
  --shadow-glow-red:  0 0 8px rgba(233, 69, 96,  0.25);  /* subtle, not neon */
  --shadow-glow-blue: 0 0 8px rgba(74, 158, 255, 0.20);

  /* ─── Border radius — angular, industrial ─── */
  /* SolidWorks / CIMCO: sharp edges, not iOS bubbly */
  --radius-xs:  1px;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-xl:  8px;
  --radius-2xl: 10px;
  --radius-full: 9999px;

  /* ─── Spacing ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Layout dimensions ─── */
  --sidebar-width:      220px;
  --header-height:      56px;
  --bottom-nav-height:  64px;
  --editor-left-width:  340px;
  --editor-right-width: 250px;

  /* ─── Typography ─── */
  --font-sans:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Grafana uses Inter */
  --font-mono:  'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

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

  /* ─── Transitions ─── */
  --transition-fast:   80ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   250ms ease;
  --transition-spring: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-index scale ─── */
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-header:     300;
  --z-sidebar:    400;
  --z-overlay:    500;
  --z-modal:      600;
  --z-toast:      700;
  --z-tooltip:    800;

  /* ─── Scrollbar ─── */
  --scrollbar-width: 6px;
  --scrollbar-track: var(--bg-deep);
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
}

/* ─── Dark scrollbars (Webkit) ─── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* ─── Base reset & typography ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

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

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background-color: var(--accent-blue-20);
  color: var(--text-primary);
}