/* ===================================== */
/* Anevex Theme Tokens */
/* ===================================== */
:root {
  /* colors */
  --anx-color-primary: #0F766E;
  --anx-color-primary-strong: #115E59;
  --anx-color-primary-hover: #0D9488;
  --anx-color-primary-soft: #ECFDF5;
  --anx-color-primary-soft-alt: #eef9f4;
  --anx-color-success-strong: #0f7b4f;
  --anx-color-warning: #b7791f;
  --anx-color-warning-strong: #9a6700;
  --anx-color-warning-soft: #fff4de;
  --anx-color-danger: #c2413b;
  --anx-color-danger-strong: #b42318;
  --anx-color-danger-soft: #fdeceb;
  --anx-color-text: #1f2937;
  --anx-color-text-strong: #111827;
  --anx-color-text-soft: #475467;
  --anx-color-text-secondary: #374151;
  --anx-color-muted: #667085;
  --anx-color-muted-soft: #98a2b3;
  --anx-color-muted-strong: #6b7280;
  --anx-color-muted-subtle: #94A3B8;
  --anx-color-surface: #ffffff;
  --anx-color-surface-subtle: #F8FAFC;
  --anx-color-surface-soft: #fcfffe;
  --anx-color-surface-hover: #f8fcfa;
  --anx-color-surface-hover-strong: #F0FDFA;
  --anx-color-surface-glass: rgba(255, 255, 255, 0.96);
  --anx-color-surface-glass-strong: rgba(255, 255, 255, 0.98);
  --anx-color-surface-disabled: rgba(246, 249, 251, 0.75);
  --anx-color-border: #E5E7EB;
  --anx-color-border-strong: #D1D5DB;
  --anx-color-border-soft: #EEF2F7;
  --anx-color-border-secondary: #d9e2ea;
  --anx-color-border-dark: #d7dee6;
  --anx-color-border-primary: #d3ece1;
  --anx-color-border-success: #bfe5cf;
  --anx-color-border-warning: #ffdca0;
  --anx-color-border-danger: #f7c7c3;
  --anx-color-border-danger-soft: #F3D5D2;
  --anx-color-border-danger-strong: #E6B8B3;
  --anx-color-border-info-soft: #D1FAE5;
  --anx-color-bg-secondary: #eef2f6;
  --anx-color-bg-dark: #eef1f5;
  --anx-color-bg-success: #e8f7ef;
  --anx-color-bg-danger: #FEF2F2;
  --anx-color-focus: rgba(15, 118, 110, 0.08);
  --anx-color-selection: rgba(22, 135, 114, 0.18);
  --anx-color-resize: rgba(152, 162, 179, 0.55);
  --anx-color-resize-active: rgba(22, 135, 114, 0.72);

  /* typography */
  --anx-font-family-ar: "Almarai", sans-serif;
  --anx-font-family-latin: "Inter", sans-serif;
  --anx-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --anx-font-size-xs: 0.72rem;
  --anx-font-size-sm: 0.8rem;
  --anx-font-size-md: 0.89rem;
  --anx-font-size-base: 0.95rem;
  --anx-font-size-lg: 1rem;
  --anx-font-size-xl: 1.08rem;
  --anx-font-weight-normal: 400;
  --anx-font-weight-semibold: 600;
  --anx-font-weight-bold: 700;
  --anx-font-weight-extrabold: 800;
  --anx-font-weight-black: 900;
  --anx-line-height-tight: 1.25;
  --anx-line-height-base: 1.45;

  /* spacing scale */
  --anx-space-0: 0;
  --anx-space-1: 0.25rem;
  --anx-space-2: 0.5rem;
  --anx-space-3: 0.75rem;
  --anx-space-4: 1rem;
  --anx-space-5: 1.25rem;
  --anx-space-6: 1.5rem;
  --anx-space-7: 2rem;

  /* radius */
  --anx-radius-sm: 6px;
  --anx-radius-md: 8px;
  --anx-radius-lg: 12px;
  --anx-radius-pill: 999px;

  /* shadows */
  --anx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --anx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --anx-shadow-md: 0 4px 10px rgba(15, 23, 42, 0.05);
  --anx-shadow-lg: 0 6px 18px rgba(15, 23, 42, 0.08);
  --anx-shadow-xl: 0 8px 22px rgba(15, 23, 42, 0.07);
  --anx-shadow-primary: 0 4px 12px rgba(15, 118, 110, 0.08);

  /* borders */
  --anx-border-subtle: 1px solid var(--anx-color-border);
  --anx-border-soft: 1px solid var(--anx-color-border-soft);
  --anx-border-primary-soft: 1px solid rgba(15, 118, 110, 0.16);
  --anx-border-primary-soft-strong: 1px solid rgba(15, 118, 110, 0.18);
  --anx-border-primary-hover: 1px solid rgba(22, 135, 114, 0.24);
  --anx-border-primary-active: 1px solid rgba(15, 118, 110, 0.3);
  --anx-border-glass: 1px solid rgba(229, 231, 235, 0.95);
  --anx-border-glass-soft: 1px solid rgba(229, 231, 235, 0.9);
  --anx-border-header: 1px solid rgba(216, 226, 234, 0.95);

  /* layout sizing */
  --workspace-width: clamp(304px, 22vw, 324px);
  --workspace-top: 84px;
  --sticky-actions-width: 62px;
  --sticky-settings-width: 44px;
  --sticky-total-width: 104px;
  --lines-min-width: 1120px;
  --control-height: 36px;
  --control-height-sm: 36px;

  /* legacy aliases */
  --anx-primary: var(--anx-color-primary);
  --anx-primary-dark: var(--anx-color-primary-strong);
  --anx-primary-soft: var(--anx-color-primary-soft);
  --anx-accent: var(--anx-color-primary);
  --anx-accent-soft: var(--anx-color-primary-soft);
  --anx-success: var(--anx-color-primary);
  --anx-success-soft: var(--anx-color-primary-soft);
  --anx-warning: var(--anx-color-warning);
  --anx-warning-soft: var(--anx-color-warning-soft);
  --anx-danger: var(--anx-color-danger);
  --anx-danger-soft: var(--anx-color-danger-soft);
  --anx-border: var(--anx-color-border);
  --anx-border-strong: var(--anx-color-border-strong);
  --anx-surface: var(--anx-color-surface);
  --anx-surface-soft: var(--anx-color-surface-subtle);
  --anx-text: var(--anx-color-text);
  --anx-muted: var(--anx-color-muted);
  --anx-focus: var(--anx-color-focus);

  /* bootstrap bridge */
  --bs-primary: var(--anx-color-primary);
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: var(--anx-color-primary-strong);
  --bs-link-hover-color: var(--anx-color-primary-hover);
  --bs-focus-ring-color: var(--anx-color-focus);
}

html[dir="rtl"] {
  --anx-font-family-base: var(--anx-font-family-ar);
}

html[dir="ltr"] {
  --anx-font-family-base: var(--anx-font-family-latin);
}

/* ===================================== */
/* Base Styles */
/* ===================================== */
html[dir="rtl"],
html[dir="rtl"] body {
  font-family: var(--anx-font-family-ar);
}

html[dir="ltr"],
html[dir="ltr"] body {
  font-family: var(--anx-font-family-latin);
}

body {
  background: var(--anx-color-surface-subtle);
  color: var(--anx-color-text);
  font-family: var(--anx-font-family-base);
  font-size: var(--anx-font-size-base);
  line-height: var(--anx-line-height-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--anx-color-selection);
  color: var(--anx-color-text);
}

input,
select,
textarea,
button {
  accent-color: var(--anx-color-primary);
}

/* ===================================== */
/* Modernization Overrides */
/* ===================================== */
:root {
  --anx-color-primary: #0f766e;
  --anx-color-primary-strong: #0b5d57;
  --anx-color-primary-hover: #129285;
  --anx-color-primary-soft: #eefbf7;
  --anx-color-primary-soft-alt: #f4fcf9;
  --anx-color-success-strong: #117a58;
  --anx-color-warning: #b57b1f;
  --anx-color-warning-strong: #996300;
  --anx-color-danger: #c54a43;
  --anx-color-danger-strong: #b42318;
  --anx-color-text: #182230;
  --anx-color-text-strong: #101828;
  --anx-color-text-soft: #667085;
  --anx-color-text-secondary: #344054;
  --anx-color-muted: #667085;
  --anx-color-muted-soft: #98a2b3;
  --anx-color-muted-strong: #475467;
  --anx-color-muted-subtle: #98a2b3;
  --anx-color-surface: rgba(255, 255, 255, 0.92);
  --anx-color-surface-subtle: #f3f7fb;
  --anx-color-surface-soft: #f8fbfd;
  --anx-color-surface-hover: #f6fbfa;
  --anx-color-surface-hover-strong: #edf7f5;
  --anx-color-surface-glass: rgba(255, 255, 255, 0.82);
  --anx-color-surface-glass-strong: rgba(255, 255, 255, 0.92);
  --anx-color-surface-disabled: rgba(245, 248, 251, 0.88);
  --anx-color-border: #e4ebf3;
  --anx-color-border-strong: #d8e2ec;
  --anx-color-border-soft: #edf2f7;
  --anx-color-border-secondary: #d6e0ea;
  --anx-color-border-dark: #d7e0ea;
  --anx-color-border-primary: #cde9df;
  --anx-color-border-success: #bfe4d2;
  --anx-color-border-warning: #f4d8a4;
  --anx-color-border-danger: #efc5c2;
  --anx-color-border-danger-soft: #f2d6d3;
  --anx-color-border-danger-strong: #e4b8b3;
  --anx-color-border-info-soft: #d6f1e8;
  --anx-color-bg-secondary: #f2f5f9;
  --anx-color-bg-dark: #edf2f7;
  --anx-color-bg-success: #e7f7ef;
  --anx-color-bg-danger: #fef3f2;
  --anx-color-focus: rgba(15, 118, 110, 0.13);
  --anx-color-selection: rgba(15, 118, 110, 0.16);
  --anx-color-resize: rgba(148, 163, 184, 0.5);
  --anx-color-resize-active: rgba(15, 118, 110, 0.74);

  --anx-font-size-xs: 0.72rem;
  --anx-font-size-sm: 0.8rem;
  --anx-font-size-md: 0.89rem;
  --anx-font-size-base: 0.95rem;
  --anx-font-size-lg: 1.02rem;
  --anx-font-size-xl: 1.14rem;
  --anx-line-height-tight: 1.22;
  --anx-line-height-base: 1.5;

  --anx-space-3: 0.8rem;
  --anx-space-4: 1rem;
  --anx-space-5: 1.3rem;
  --anx-space-6: 1.6rem;

  --anx-radius-sm: 10px;
  --anx-radius-md: 14px;
  --anx-radius-lg: 18px;

  --anx-shadow-xs:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 1px rgba(15, 23, 42, 0.02);
  --anx-shadow-sm:
    0 10px 22px rgba(15, 23, 42, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --anx-shadow-md:
    0 18px 40px rgba(15, 23, 42, 0.08),
    0 4px 12px rgba(15, 23, 42, 0.04);
  --anx-shadow-lg:
    0 24px 58px rgba(15, 23, 42, 0.12),
    0 10px 22px rgba(15, 23, 42, 0.05);
  --anx-shadow-xl:
    0 36px 80px rgba(15, 23, 42, 0.16),
    0 14px 32px rgba(15, 23, 42, 0.06);
  --anx-shadow-primary:
    0 18px 38px rgba(15, 118, 110, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;

  --anx-border-subtle: 1px solid rgba(221, 229, 239, 0.92);
  --anx-border-soft: 1px solid rgba(234, 240, 246, 0.96);
  --anx-border-primary-soft: 1px solid rgba(15, 118, 110, 0.16);
  --anx-border-primary-soft-strong: 1px solid rgba(15, 118, 110, 0.2);
  --anx-border-primary-hover: 1px solid rgba(15, 118, 110, 0.28);
  --anx-border-primary-active: 1px solid rgba(15, 118, 110, 0.34);
  --anx-border-glass: 1px solid rgba(226, 233, 242, 0.82);
  --anx-border-glass-soft: 1px solid rgba(233, 239, 245, 0.88);
  --anx-border-header: 1px solid rgba(222, 230, 239, 0.82);

  --control-height: 38px;
  --control-height-sm: 36px;

  --bs-body-bg: var(--anx-color-surface-subtle);
  --bs-body-color: var(--anx-color-text);
  --bs-border-color: var(--anx-color-border);
  --bs-secondary-color: var(--anx-color-muted);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 24%),
    radial-gradient(circle at top left, rgba(15, 23, 42, 0.05), transparent 28%),
    linear-gradient(180deg, #f9fbfd 0%, #f4f7fb 52%, #eef3f8 100%);
  color: var(--anx-color-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.78), transparent 28%);
  opacity: 0.9;
}

body > * {
  position: relative;
  z-index: 1;
}