/* =============================================================================
   AL-KINZ Internet — Design Tokens (Single Source of Truth)
   All raw + structural design primitives live here. Themes map these into
   semantic variables in assets/themes/definitions/{theme}/{mode}.css via boot.js.
   Never hardcode a value elsewhere.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     COLOR PRIMITIVES  (raw palette — not used directly in components)
     Brand concept: "الكنز / treasure" → refined gold over neutral obsidian.
     -------------------------------------------------------------------------- */

  /* Gold / brass — brand accent ramp */
  --gold-50:  #FBF6E6;
  --gold-100: #F4E9C2;
  --gold-200: #E9D58C;
  --gold-300: #DDC159;
  --gold-400: #D4AF37; /* signature */
  --gold-500: #C19A2B;
  --gold-600: #9A7B16; /* AA text-on-light */
  --gold-700: #7C6212;
  --gold-800: #5E4A0E;
  --gold-900: #3F320A;

  /* Neutral — cool obsidian ramp (dark UI base) */
  --ink-0:   #0A0D12;
  --ink-50:  #0E1116;
  --ink-100: #161B22;
  --ink-200: #1C232D;
  --ink-300: #2A323D;
  --ink-400: #3A4452;
  --ink-500: #54606E;
  --ink-600: #6B7785;
  --ink-700: #9BA7B4;
  --ink-800: #C7D0DA;
  --ink-900: #E8EDF2;
  --ink-1000: #F7FAFC;

  /* Warm parchment ramp (light UI base — independent, not inverted) */
  --sand-0:   #FFFFFF;
  --sand-50:  #FBF8F1;
  --sand-100: #F7F4EC;
  --sand-200: #EFE9DA;
  --sand-300: #E5DECF;
  --sand-400: #D4CAB4;
  --sand-500: #B9AD92;

  /* Status ramps (each independent of theme) */
  --emerald-400: #34C98A;
  --emerald-500: #2FB67C;
  --emerald-600: #1F8F5F;
  --emerald-700: #16703F;

  --amber-400: #ECB94A;
  --amber-500: #E0A82E;
  --amber-600: #B5791A;
  --amber-700: #8A5A12;

  --red-400: #F0676B;
  --red-500: #E5484D;
  --red-600: #C7383C;
  --red-700: #99272B;

  --azure-400: #5C99F7;
  --azure-500: #4C8DF6;
  --azure-600: #2D6FD6;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     Latin display: Sora · Latin body: Manrope · Arabic: IBM Plex Sans Arabic
     Mono (IDs/IPs/figures): JetBrains Mono
     -------------------------------------------------------------------------- */
  --font-display: "Sora", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "Manrope", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  /* Per-language font binding is defined OUTSIDE :root (end of file): a selector
     nested inside :root resolves to ":root html[…]" and never matches, so the
     language never actually changed the font. Top-level rules below fix that. */

  /* Modular type scale — pixel-grid aligned (every step is an integer px to
     prevent sub-pixel rendering). Ratios stay near a 1.2 minor-third rhythm. */
  --text-2xs: 0.6875rem; /* 11 — eyebrows / micro-labels */
  --text-xs:  0.75rem;   /* 12 — table meta, captions */
  --text-sm:  0.8125rem; /* 13 — secondary body */
  --text-base: 0.875rem; /* 14 — body / table cells (console default) */
  --text-md:  1rem;      /* 16 — emphasized body */
  --text-lg:  1.125rem;  /* 18 — card titles */
  --text-xl:  1.3125rem; /* 21 — section headings */
  --text-2xl: 1.5625rem; /* 25 — large KPI / page subtitle */
  --text-3xl: 1.75rem;   /* 28 — page title */
  --text-4xl: 2.0625rem; /* 33 — hero numerals (rare) */
  --text-5xl: 2.5rem;    /* 40 — login / marketing hero only */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --tracking-tight: 0;
  --tracking-snug: 0;
  --tracking-normal: 0;
  --tracking-wide: 0;
  --tracking-wider: 0;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---------------------------------------------------------------------------
     SPACING — 4px base; major steps influenced by golden ratio (φ ≈ 1.618)
     -------------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 6rem;    /* 96 */
  --space-11: 9.75rem; /* 156 ≈ 96·φ */

  /* ---------------------------------------------------------------------------
     RADII
     -------------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     BORDERS / RING
     -------------------------------------------------------------------------- */
  --border-width: 1px;
  --ring-width: 2px;
  --ring-offset: 2px;

  /* ---------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 100ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 360ms;
  --dur-5: 560ms;
  --dur-fast: var(--dur-2);
  --dur-medium: var(--dur-3);
  --dur-slow: var(--dur-4);

  /* ---------------------------------------------------------------------------
     ELEVATION (z-index scale)
     -------------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 790;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* ---------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --sidebar-w: 15.5rem;
  --sidebar-w-collapsed: 4.5rem;
  --topbar-h: 4.25rem;
  --content-max: 96rem;
  --field-h: 2.75rem;
  --field-h-sm: 2.25rem;
  --stack-gap: var(--space-4);
  --cluster-gap: var(--space-3);
  --grid-gap: var(--space-5);

  /* ---------------------------------------------------------------------------
     BREAKPOINTS — canonical scale for the whole app (referenced in JS too).
     CSS custom properties cannot be used inside @media conditions (the spec
     does not allow var() in media features), so these values cannot be
     consumed directly by @media rules. Every @media rule anywhere in the
     codebase MUST hardcode these same literal pixel values — 640px / 768px /
     1024px / 1280px — rather than inventing new cuts. If a breakpoint here
     ever changes, grep the codebase for the old literal and update every
     @media rule that used it.
     -------------------------------------------------------------------------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* =============================================================================
   PER-LANGUAGE TYPOGRAPHY BINDING  (top-level — must NOT be nested in :root)
   Language owns the font *family*; themes own weight / tracking / rhythm.
   boot.js sets html[lang]; theme-loader sets html[data-theme].
   ========================================================================== */
html[lang="en"] {
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
/* Genesis (Signal) uses Inter for Latin; Arabic still resolves via html[lang="ar"]. */
html[lang="en"][data-theme="genesis"] {
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

/* English labels ("PPP Connections", "SMS Messages", "Collapse menu") need
   enough rail width to avoid mid-word truncation. Theme files own their base
   widths; these selectors only widen narrow language/theme combinations. */
html[lang="en"][data-theme="premium"] {
  --sidebar-w: 17.25rem;
}
html[lang="en"][data-theme="genesis"] {
  --sidebar-w: 17.5rem;
}