/* ═══════════════════════════════════════════════════════════════════════════
   this design will be Design System  —  colors_and_type.css
   Extracted from Genius Link ERP (codename Ledgerly) source evidence under
   context/local-code/GeniusSystem-v2-20260522/shared/Ledgerly-Design-System.html
   and shared/GLComponentsLibraryScreen.html. Light + Dark themes, full
   semantic color set, three font families bound below, spacing, radius,
   shadows, and motion tokens. This is the single source of truth for
   tokens — never edit a copy in a preview or ui_kit; bind to this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Brand typeface bindings ───────────────────────────────────────────────
   Cairo is the bilingual EN/AR display + body face used throughout the
   product. Inter is the Latin-only body face and JetBrains Mono is the
   monospace face for tabular numerics, codes, and reference IDs. All three
   are pulled from Google Fonts so the package stays portable without
   bundling .woff2 files. If a future agent needs to ship the system
   offline, drop the .woff2 files into ../fonts/ and switch this @import to
   @font-face rules pointing at them. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   1. THEME TOKENS  —  Light (default) + Dark via [data-theme="dark"]
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="light"] {
  /* Surfaces — cool-white canvas with three layered greys */
  --bg:           #f5f6f8;
  --surface:      #ffffff;
  --surface-2:    #f0f2f6;
  --surface-3:    #e7eaf0;

  /* Borders — hairline by default, strong for emphasised edges */
  --border:        #e3e6ec;
  --border-strong: #d3d8e1;

  /* Text — ink, muted, and dim */
  --text:        #0f1525;
  --text-muted:  #5d6478;
  --text-dim:    #8a90a1;

  /* Brand — electric blue. Used at most twice per screen. */
  --primary:       #2d5bff;
  --primary-soft:  #e5ecff;
  --primary-ink:   #1d3fbf;

  /* Status — success, danger, amber, purple. Each ships ink + soft. */
  --success:       #16a34a;
  --success-soft:  #dff7e5;
  --success-ink:   #0c6b33;

  --danger:        #dc2626;
  --danger-soft:   #fde2e2;
  --danger-ink:    #971818;

  --amber:         #c68b00;
  --amber-soft:    #fdedc8;
  --amber-ink:     #7f5700;

  --purple:        #7c3aed;
  --purple-soft:   #ede9fe;
  --purple-ink:    #4c1d95;

  /* Elevation — three shadow tokens. Use sparingly: sm on cards, md on
     popovers/menus, lg on dialogs/drawers. */
  --shadow-sm:  0 1px 2px rgba(15, 21, 37, .04);
  --shadow-md:  0 4px 16px -4px rgba(15, 21, 37, .10);
  --shadow-lg:  0 20px 60px -20px rgba(15, 21, 37, .25);

  /* Focus ring — 3px brand-tinted halo, always paired with a 1px border */
  --ring: 0 0 0 3px rgba(45, 91, 255, .18);

  /* Radius scale — sm for inputs, md (default) for buttons/cards, lg for
     containers/dialogs */
  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Type families ── */
  --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic: 'Cairo', 'Inter', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark theme — same semantic roles, navy-tinted surfaces, brighter
   primaries to keep AA contrast on dark backgrounds. */
:root[data-theme="dark"],
html[data-theme="dark"] {
  --bg:           #0a0d14;
  --surface:      #111523;
  --surface-2:    #151a2b;
  --surface-3:    #1c2238;

  --border:        #212741;
  --border-strong: #2c345a;

  --text:        #e8eaf2;
  --text-muted:  #9aa0b8;
  --text-dim:    #6b7291;

  --primary:       #5b7bff;
  --primary-soft:  #1b2550;
  --primary-ink:   #a8b7ff;

  --success:       #22c55e;
  --success-soft:  #102a1c;
  --success-ink:   #4ade80;

  --danger:        #ef4444;
  --danger-soft:   #2a1416;
  --danger-ink:    #fca5a5;

  --amber:         #eab308;
  --amber-soft:    #2a2112;
  --amber-ink:     #fde68a;

  --purple:        #a78bfa;
  --purple-soft:   #2e1065;
  --purple-ink:    #ddd6fe;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md:  0 4px 24px -4px rgba(0, 0, 0, .5);
  --shadow-lg:  0 20px 80px -20px rgba(0, 0, 0, .8);

  --ring: 0 0 0 3px rgba(91, 123, 255, .25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SPACING & MOTION  —  theme-agnostic
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 4-point spacing scale. Default density uses --space-3 / --space-4 for
     control padding and --space-6 / --space-8 for section padding. */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10:48px;
  --space-12:64px;
  --space-16:96px;

  /* Motion — short, easing-out for everything except expanding sheets */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 100ms;
  --dur-2: 150ms;
  --dur-3: 200ms;
  --dur-4: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY  —  scale + utilities
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Type scale — clamp-free, integers in px because the source product
     ships fixed app-shell density. Body sits at 14px (the source default)
     with 1.5 line-height. */
  --fs-xs:    11px;     /* meta, eyebrow labels, kbd hints */
  --fs-sm:    12.5px;   /* table cells, small buttons, dim helpers */
  --fs-base:  14px;     /* body default */
  --fs-md:    15px;     /* card titles, list headings */
  --fs-lg:    18px;     /* section titles */
  --fs-xl:    22px;     /* KPI numbers, card head numerics */
  --fs-2xl:   26px;     /* page section title */
  --fs-3xl:   32px;     /* hero / page title */

  --lh-tight: 1.15;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight: -.03em;
  --tracking-snug:  -.02em;
  --tracking-wide:  .08em;
  --tracking-eyebrow: .1em;
}

/* Base body wiring — bind on host page if you want this CSS to drive layout,
   otherwise the tokens above are enough. */
html, body {
  font-family: var(--font-sans);
  background:  var(--bg);
  color:       var(--text);
  font-size:   var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[dir="rtl"], html[lang="ar"], html[lang^="ar-"] {
  font-family: var(--font-arabic);
}

.mono,
[data-mono] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.num    { font-variant-numeric: tabular-nums; }

/* Eyebrow / kicker — used above section titles and inside data table
   headers. Always uppercase, dim, tracked. */
.eyebrow,
[data-eyebrow] {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BASE ELEMENT RESETS  —  optional, scoped, opt-in via .ds-reset on host
   ═══════════════════════════════════════════════════════════════════════════ */

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

.ds-reset h1, .ds-reset h2, .ds-reset h3, .ds-reset h4 {
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
.ds-reset h1 { font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-tight); }
.ds-reset h2 { font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); }
.ds-reset h3 { font-size: var(--fs-lg);  font-weight: 700; }
.ds-reset h4 { font-size: var(--fs-md);  font-weight: 600; }

.ds-reset a { color: var(--primary); text-decoration: none; }
.ds-reset a:hover { text-decoration: underline; }