/* I-Share — shared theme (fonts, color tokens, light/dark)
   Matches the RetailNexus my.apps family conventions:
   Frank Ruhl Libre for display headings, Heebo for body text,
   JetBrains Mono for codes/technical bits, RTL Hebrew UI. */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Heebo:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font-display: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --font-body: 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --bg: #f6f5f9;
  --bg-elevated: #ffffff;
  --bg-inset: #edecf5;
  --text: #1a1825;
  --text-muted: #635f77;
  --border: #e0dee9;

  --brand: #5b4ad9;
  --brand-strong: #4636b8;
  --brand-soft: #eeebfb;
  --accent: #ffb020;
  --danger: #e0483e;
  --danger-soft: #fbe9e7;
  --success: #1f9d6b;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --shadow: 0 4px 20px rgba(30, 20, 60, 0.08);
  --shadow-lift: 0 12px 32px rgba(30, 20, 60, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f14;
    --bg-elevated: #1a1a22;
    --bg-inset: #232330;
    --text: #f1f0f6;
    --text-muted: #9c98ae;
    --border: #2d2c3a;

    --brand: #8a7bf0;
    --brand-strong: #a597ff;
    --brand-soft: #262148;
    --accent: #ffc94d;
    --danger: #ff6b60;
    --danger-soft: #3a1f1f;
    --success: #3fd08c;

    --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg: #0f0f14;
  --bg-elevated: #1a1a22;
  --bg-inset: #232330;
  --text: #f1f0f6;
  --text-muted: #9c98ae;
  --border: #2d2c3a;

  --brand: #8a7bf0;
  --brand-strong: #a597ff;
  --brand-soft: #262148;
  --accent: #ffc94d;
  --danger: #ff6b60;
  --danger-soft: #3a1f1f;
  --success: #3fd08c;

  --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

/* The `hidden` attribute's default display:none is a browser default style — it loses
   to any of our own classes that set display explicitly (e.g. .fab{display:flex}),
   which silently un-hides "hidden" elements and stacks them on top of whatever else
   occupies the same spot (this bit the upload/selection toolbars in event.html).
   !important guarantees `hidden` always wins, everywhere, regardless of what else
   sets display on that element. Toggle visibility via the `hidden` property/attribute
   only — never by fighting this with inline styles. */
[hidden] { display: none !important; }

html {
  direction: rtl;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

code, .mono {
  font-family: var(--font-mono);
}

a { color: var(--brand); }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection { background: var(--brand-soft); }