/* SMG IoT Hub — design tokens (single source).
   Base: VoxAI design system (SMG corporate identity), inlined from designer/claude-design/_ds/.../tokens.
   Components and pages must only reference the variables declared here. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

/* ---- VoxAI base ramps ---- */
:root {
  --vx-brand-50:  #FFF1EA;
  --vx-brand-100: #FFDDCC;
  --vx-brand-200: #FFB997;
  --vx-brand-300: #FF9362;
  --vx-brand-400: #FF6E2E;
  --vx-brand-500: #FE5000;
  --vx-brand-600: #E84600;
  --vx-brand-700: #C23A02;
  --vx-brand-800: #992E06;
  --vx-brand-900: #7A2608;

  --vx-neutral-0:   #FFFFFF;
  --vx-neutral-25:  #FAFBFB;
  --vx-neutral-50:  #F4F5F6;
  --vx-neutral-100: #ECEDEF;
  --vx-neutral-200: #E2E3E5;
  --vx-neutral-300: #D1D3D6;
  --vx-neutral-400: #AEB0B4;
  --vx-neutral-500: #97999B;
  --vx-neutral-600: #73767A;
  --vx-neutral-700: #53565A;
  --vx-neutral-800: #3A3D42;
  --vx-neutral-900: #26292E;

  --vx-success: #1E9E5A; --vx-success-bg: #E7F6EE; --vx-success-text: #146C3E;
  --vx-warning: #E08600; --vx-warning-bg: #FCF0DA; --vx-warning-text: #8A5300;
  --vx-danger:  #E0342B; --vx-danger-bg:  #FCEAE9; --vx-danger-text:  #9C201A;
  --vx-info:    #2D6CDF; --vx-info-bg:    #E9F0FD; --vx-info-text:    #1B4699;

  /* Roles */
  --vx-bg:            var(--vx-neutral-50);
  --vx-surface:       var(--vx-neutral-0);
  --vx-surface-2:     var(--vx-neutral-25);
  --vx-border:        var(--vx-neutral-200);
  --vx-border-strong: var(--vx-neutral-300);
  --vx-text:          #2C2F34;
  --vx-text-2:        var(--vx-neutral-700);
  --vx-text-3:        var(--vx-neutral-500);
  --vx-primary:       var(--vx-brand-500);
  --vx-primary-hover: var(--vx-brand-600);
  --vx-on-primary:    #FFFFFF;
  --vx-focus-ring:    0 0 0 3px rgba(254, 80, 0, .25);

  /* Typography */
  --vx-font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --vx-font-display: 'Plus Jakarta Sans', var(--vx-font-sans);
  --vx-text-display: 1.75rem;
  --vx-text-h1: 1.375rem;
  --vx-text-h2: 1.125rem;
  --vx-text-h3: 1rem;
  --vx-text-body: 0.9375rem;
  --vx-text-sm: 0.8125rem;
  --vx-text-xs: 0.72rem;
  --vx-weight-regular: 400;
  --vx-weight-medium: 500;
  --vx-weight-semibold: 600;
  --vx-leading-body: 1.5;
  --vx-leading-tight: 1.2;

  /* Spacing, radius, elevation, motion */
  --vx-space-1: 4px;  --vx-space-2: 8px;  --vx-space-3: 12px; --vx-space-4: 16px;
  --vx-space-5: 20px; --vx-space-6: 24px; --vx-space-8: 32px; --vx-space-10: 40px;
  --vx-space-12: 48px;
  --vx-radius-sm: 8px; --vx-radius-md: 10px; --vx-radius-lg: 14px;
  --vx-radius-xl: 18px; --vx-radius-pill: 999px;
  --vx-shadow-sm: 0 1px 2px rgba(20,22,26,.06);
  --vx-shadow-md: 0 4px 16px rgba(20,22,26,.08);
  --vx-shadow-lg: 0 12px 32px rgba(20,22,26,.12);
  --vx-ease: cubic-bezier(.2,.6,.2,1);
  --vx-dur: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vx-dur: 0ms; }
}

/* ---- Application tokens ---- */
:root {
  /* Surfaces and text */
  --bg: var(--vx-bg);
  --surface: var(--vx-surface);
  --surface-2: var(--vx-surface-2);
  --surface-hover: var(--vx-neutral-50);
  --border: var(--vx-border);
  --border-strong: var(--vx-border-strong);
  --text: var(--vx-text);
  --text-2: var(--vx-text-2);
  --text-3: var(--vx-text-3);
  --skeleton: var(--vx-neutral-100);
  --overlay: rgba(20, 22, 26, .45);
  --track: var(--vx-neutral-200);          /* slider track, progress rail */
  --switch-off: var(--vx-neutral-300);     /* switch background when off */

  /* Brand */
  --primary: var(--vx-primary);
  --primary-hover: var(--vx-primary-hover);
  --on-primary: var(--vx-on-primary);
  --on-accent: #FFFFFF;                    /* text/thumb on saturated fills (primary, danger, scene colors) */
  --on-accent-muted: rgba(255, 255, 255, .8);
  --primary-soft: var(--vx-brand-50);
  --primary-soft-text: var(--vx-brand-700);
  --focus-ring: var(--vx-focus-ring);

  /* Status */
  --success: var(--vx-success); --success-bg: var(--vx-success-bg); --success-text: var(--vx-success-text);
  --warning: var(--vx-warning); --warning-bg: var(--vx-warning-bg); --warning-text: var(--vx-warning-text);
  --danger: var(--vx-danger);   --danger-bg: var(--vx-danger-bg);   --danger-text: var(--vx-danger-text);
  --info: var(--vx-info);       --info-bg: var(--vx-info-bg);       --info-text: var(--vx-info-text);
  --offline: var(--vx-neutral-400);

  /* Live indicators and glows */
  --live-pulse: rgba(30, 158, 90, .35);
  --live-pulse-end: rgba(30, 158, 90, 0);
  --live-pulse-from: 0 0 0 0 var(--live-pulse);
  --live-pulse-to: 0 0 0 5px var(--live-pulse-end);
  --sign-glow: rgba(254, 80, 0, .35);
  --sign-text-glow: rgba(255, 255, 255, .7);
  --sign-shadow: 0 0 0 6px var(--primary-soft), 0 0 32px var(--sign-glow);
  --sign-text-shadow: 0 0 12px var(--sign-text-glow);

  /* Scene / group colours (groups.json: green, purple, blue, orange, red) */
  --scene-green: var(--vx-success);  --scene-green-bg: var(--vx-success-bg);
  --scene-blue: var(--vx-info);      --scene-blue-bg: var(--vx-info-bg);
  --scene-red: var(--vx-danger);     --scene-red-bg: var(--vx-danger-bg);
  --scene-orange: var(--vx-brand-500); --scene-orange-bg: var(--vx-brand-50);
  --scene-purple: #6E56CF;           --scene-purple-bg: #EFEBFC;

  /* Typography */
  --font: var(--vx-font-sans);
  --font-display: var(--vx-font-display);
  --text-display: var(--vx-text-display);
  --text-h1: var(--vx-text-h1);
  --text-h2: var(--vx-text-h2);
  --text-h3: var(--vx-text-h3);
  --text-body: var(--vx-text-body);
  --text-control: 0.875rem;    /* 14px — buttons, inputs, nav items */
  --text-sm: var(--vx-text-sm);
  --text-chip: 0.78125rem;     /* 12.5px — chips */
  --text-xs: var(--vx-text-xs);
  --text-nav: 0.6875rem;       /* 11px — mobile tab bar labels */
  --text-2xs: 0.65625rem;      /* 10.5px — "by smg" caption */
  --text-wordmark: 1.0625rem;  /* 17px — sidebar wordmark */
  --text-sign: 1.375rem;       /* 22px — signboard preview */
  --text-metric: 1.75rem;
  --text-hero: 3rem;
  --w-regular: var(--vx-weight-regular);
  --w-medium: var(--vx-weight-medium);
  --w-semibold: var(--vx-weight-semibold);
  --leading: var(--vx-leading-body);
  --leading-tight: var(--vx-leading-tight);

  /* Spacing (×4 scale plus half steps used by compact components) */
  --sp-px: 1.5px;
  --sp-0-5: 2px; --sp-0-75: 3px;
  --sp-1: var(--vx-space-1); --sp-1-25: 5px; --sp-1-5: 6px; --sp-1-75: 7px;
  --sp-2: var(--vx-space-2); --sp-2-5: 10px; --sp-3: var(--vx-space-3); --sp-3-25: 13px;
  --sp-4: var(--vx-space-4); --sp-4-5: 18px; --sp-5: var(--vx-space-5); --sp-5-5: 22px;
  --sp-6: var(--vx-space-6); --sp-8: var(--vx-space-8); --sp-9-5: 38px; --sp-10: var(--vx-space-10);
  --sp-12: var(--vx-space-12); --sp-24: 96px;

  /* Radius */
  --r-hair: 1px; --r-2xs: 2px; --r-xs: 3px;
  --r-sm: var(--vx-radius-sm); --r-md: var(--vx-radius-md); --r-lg: var(--vx-radius-lg);
  --r-xl: var(--vx-radius-xl); --r-pill: var(--vx-radius-pill);

  /* Shadows (floating layers only) */
  --shadow-sm: var(--vx-shadow-sm); --shadow-md: var(--vx-shadow-md); --shadow-lg: var(--vx-shadow-lg);

  /* Motion */
  --ease: var(--vx-ease);
  --dur: var(--vx-dur);
  --dur-slow: 320ms;

  /* Layout dimensions */
  --sidebar-w: 240px;
  --sidebar-rail-w: 64px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --drawer-w: 440px;
  --content-max: 1200px;
  --editor-max: 720px;
  --card-min: 200px;
  --scene-card-min: 220px;
  --tree-w: 220px;
  --store-menu-top: 118px;
  --swipe-action-w: 72px;
  --control-h: 38px;
  --control-h-sm: 32px;
  --control-h-lg: 44px;
  --icon: 20px;
  --icon-sm: 18px;
  --icon-lg: 24px;
  --switch-w: 38px;
  --switch-h: 22px;
  --switch-thumb: 18px;
  --tap: 44px;

  /* Component size scale (icon boxes, dots, thumbs, min heights) */
  --size-2: 2px; --size-3: 3px; --size-4: 4px; --size-6: 6px; --size-7: 7px; --size-8: 8px;
  --size-10: 10px; --size-11: 11px; --size-12: 12px; --size-14: 14px; --size-16: 16px; --size-18: 18px;
  --size-20: 20px; --size-22: 22px; --size-24: 24px; --size-26: 26px; --size-28: 28px; --size-30: 30px; --size-32: 32px;
  --size-36: 36px; --size-40: 40px; --size-42: 42px; --size-48: 48px; --size-52: 52px; --size-56: 56px;
  --size-60: 60px; --size-64: 64px; --size-72: 72px; --size-96: 96px; --size-120: 120px;
  --size-140: 140px; --size-148: 148px; --size-150: 150px; --size-180: 180px; --size-200: 200px; --size-320: 320px; --size-420: 420px;

  /* Anons Üretici (Ekran 13) */
  --announcer-side-min: 300px;
  --send-bar-h: 84px;
  --leading-loose: 1.6;

  /* Layers */
  --z-tabbar: 30;
  --z-drawer: 40;
  --z-sheet: 50;
  --z-toast: 60;

  /* Breakpoints (reference only; media queries use literals): mobile < 768, tablet 768–1023, desktop ≥ 1024 */
}

[data-theme="dark"] {
  --vx-bg:            #161719;
  --vx-surface:       #1E2022;
  --vx-surface-2:     #26282B;
  --vx-border:        #313438;
  --vx-border-strong: #3C4045;
  --vx-text:          #F1F2F3;
  --vx-text-2:        #BFC1C4;
  --vx-text-3:        #8A8D91;
  --vx-primary:       var(--vx-brand-500);
  --vx-primary-hover: var(--vx-brand-400);
  --vx-success-bg: #12301F; --vx-warning-bg: #34260A;
  --vx-danger-bg: #341312; --vx-info-bg: #122039;
  --surface-hover: #26282B;
  --skeleton: #2A2D31;
  --primary-soft: #3A2314;
  --primary-soft-text: var(--vx-brand-300);
  --scene-purple-bg: #262043;
  --offline: var(--vx-neutral-600);
  --switch-off: var(--vx-neutral-600);
}

/* Dark theme — additional values (IOT-13): readable status text, rails, overlays and scene tints */
[data-theme="dark"] {
  color-scheme: dark;
  --vx-success-text: #5FD49A;
  --vx-warning-text: #F2B451;
  --vx-danger-text:  #FF8A80;
  --vx-info-text:    #8AB4F8;
  --vx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --vx-shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --vx-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  --overlay: rgba(0, 0, 0, .6);
  --track: var(--vx-neutral-700);
  --scene-orange-bg: #3A2314;
  --scene-purple: #9F8CF0;
}