/* ==========================================================================
   Maxab Hub — Design Tokens
   Lifted from the design bundle. Change a value here and it lands everywhere;
   nothing below this file should hard-code a colour, radius or spacing step.
   ========================================================================== */

:root {
  /* Brand -------------------------------------------------------------- */
  --color-primary: #C7F262;
  --color-primary-tint: rgba(199, 242, 98, 0.20);
  --color-primary-tint-soft: rgba(199, 242, 98, 0.10);
  --color-secondary: #00654B;
  --color-secondary-hover: #004F3A;

  /* Surfaces ----------------------------------------------------------- */
  --color-bg: #FFFFFF;
  --color-bg-muted: #F7F6F9;

  /* Text --------------------------------------------------------------- */
  --color-text-accent: #4A6400;
  --color-text: #000000;
  --color-text-strong: #404040;
  --color-text-muted: #4B5563;
  --color-text-subtle: #6B7280;
  --color-text-disabled: #9CA3AF;

  /* Shades ------------------------------------------------------------- */
  --color-shade-dark: #000000;
  --color-shade-light: #FFFFFF;
  --color-overlay: rgba(0, 0, 0, 0.40);
  --color-divider: #E5E7EB;

  /* Accents — used by status pills, integration tiles and intent labels - */
  --color-purple: #7E22CE;
  --color-purple-soft: #FAF5FF;
  --color-orange: #EA580C;
  --color-orange-soft: #FFF7ED;
  --color-blue: #2563EB;
  --color-blue-soft: #EFF6FF;

  /* Status ------------------------------------------------------------- */
  --color-success: #22C55E;
  --color-success-soft: #F0FDF4;
  --color-warning: #F95630;
  --color-danger: #B91C1C;
  --color-danger-soft: #FEE2E2;

  /* Semantic aliases — prefer these over the raw colours above ---------- */
  --fg-1: var(--color-text);
  --fg-2: var(--color-text-strong);
  --fg-3: var(--color-text-muted);
  --fg-4: var(--color-text-subtle);
  --fg-disabled: var(--color-text-disabled);
  --bg-1: var(--color-bg);
  --bg-2: var(--color-bg-muted);
  --border-1: var(--color-divider);
  --border-2: #D1D5DB;

  /* Type --------------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Cairo', 'Inter', system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --fs-body: 16px;
  --lh-body: 24px;

  /* Radii -------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Spacing ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-16: 64px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;

  /* Elevation ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 8px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.08), 0 4px 8px rgba(16, 24, 40, 0.04);
  --shadow-xl: 0 24px 48px rgba(16, 24, 40, 0.10), 0 8px 16px rgba(16, 24, 40, 0.05);
  --shadow-primary: 0 8px 20px rgba(199, 242, 98, 0.35);

  /* Layout ------------------------------------------------------------- */
  --sidebar-width: 264px;
  --topbar-height: 72px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--font-weight-regular);
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* The demo drives every toggle, tab and dropdown off a hidden control.
   They stay reachable by keyboard — only the native box is taken out. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Arabic copy switches typeface without any other layout change. */
[lang="ar"],
[dir="rtl"] {
  font-family: var(--font-arabic);
}