/*
  رموز التصميم للنسخة الثانية من بوابة نورا ديلايتس بشكل البنوك: الألوان والخطوط والمسافات والزوايا والظلال والحركة.
  تُقرأ أول ما تفتح الصفحة، قبل كل ملفات التنسيق الأخرى.
  المظهر الداكن هو الأصل، والفاتح يعمل كذلك، وفيهما تبقى بطاقات الصناديق زاهية وكتابتها داكنة.
  فيها لوحتان للألوان: المطبوعة في دليل الهوية، والمرسومة فعلًا فيه، ولون لكل صندوق، ولون واحد لكل حالة.
  وإن غاب هذا الملف ظهرت الصفحة بلا ألوان ولا مسافات، وتعطّل شكلها كله.
*/

/* ---------- 1. Brand raw colours (printed set; the drawn set is Karim's pick and the default on <html>) ---------- */
:root {
  --c-gold: #84754e;
  --c-pink: #fcc3c8;
  --c-mint: #b4d8bd;
  --c-cream: #efd4ac;
  --c-aqua: #81dad8;
  --c-slate: #3a4651;
  --c-raspberry: #a8254a;
  --c-foil: #daa732;
  --c-white: #ffffff;
}
/* Guide v2 (October 2026): the brand colours are the printed boxes' colours, so both palettes carry them. */
:root[data-palette="drawn"] {
  --c-gold: #84754e;
  --c-pink: #fcc3c8;
  --c-mint: #b4d8bd;
  --c-cream: #efd4ac;
  --c-aqua: #81dad8;
  --c-slate: #3a4651;
}

/* ---------- 2. Fonts and type ---------- */
/* Dubai is Noura's only typeface for Arabic and Latin (guide v2); the files ship with the portal. */
@font-face { font-family: "Dubai"; src: local("Dubai"), local("Dubai Regular"), url("../assets/fonts/Dubai-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dubai"; src: local("Dubai Medium"), url("../assets/fonts/Dubai-Medium.ttf") format("truetype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Dubai"; src: local("Dubai Bold"), url("../assets/fonts/Dubai-Bold.ttf") format("truetype"); font-weight: 700 800; font-display: swap; }
:root,
:root[data-font="dubai"] {
  --font-ar: "Dubai", "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
:root[data-font="plex"] {
  --font-ar: "IBM Plex Sans Arabic", "Readex Pro", "Tajawal", system-ui, sans-serif;
}
:root[data-font="brand"] {
  --font-ar: "Tajawal", "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
:root {
  --font-mono: "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fs-4xl: 40px;
  --lh-text: 1.6;
  --lh-tight: 1.25;
  --lh-input: 1.7;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 700;

  /* ---------- 3. Space, radii, sizes ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --gutter: 16px;
  --page-max: 1180px;
  --phone-max: 560px;
  --sidebar-w: 236px;
  --tabbar-h: 64px;
  --panel-w: 400px;
  --panel-w-lg: 520px;
  /* Names kept from version 1 for the modules that use them: there is no top bar in version 2. */
  --topbar-h: 0px;
  --navbar-h: var(--tabbar-h);

  --r-box: 24px;
  --r-card: 20px;
  --r-sheet: 24px;
  --r-tile: 14px;
  --r-ctl: 14px;
  --r-row: 12px;
  --r-pill: 999px;
  --r-chip: 999px;

  --touch: 44px;
  --touch-primary: 56px;
  --mic-size: 76px;

  /* ---------- 4. Motion ---------- */
  --dur-1: 150ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-odo: 700ms;
  --dur-count: 600ms;
  --dur-glow: 1000ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-sheet: cubic-bezier(.2, .8, .2, 1);
  --rise: 6px;
  --undo-ms: 5000ms;

  /* ---------- 5. Light theme semantic tokens ---------- */
  color-scheme: light;
  --paper: #faf7f2;
  --card: #ffffff;
  --card-2: #f4efe6;
  --card-3: #ece5d8;
  --line: #ebe5da;
  --line-strong: #d9cfbf;
  /* The only edge of a field or a choice button: at least 3:1 on the page and on the cards */
  --line-ctl: #8f846f;
  --ink: var(--c-slate);
  --muted: #646d78;
  --gold: var(--c-gold);
  --gold-ink: #5f5742;
  --on-gold: #ffffff;
  --gold-foil: var(--c-foil);
  --side-bg: #ffffff;
  --nav-on-bg: #f4efe5;
  --tabbar-bg: rgba(255, 255, 255, .94);
  --row-hover: #faf6ef;
  --grab: #ddd4c6;
  --attn: var(--c-raspberry);
  --attn-tint: #fbe6ec;
  --focus: #1f6664;
  --scrim: rgba(40, 46, 54, .42);
  --shadow-1: 0 1px 2px rgba(58, 70, 81, .08);
  --shadow-2: 0 1px 3px rgba(58, 70, 81, .10), 0 8px 24px rgba(58, 70, 81, .08);
  --shadow-sheet: 0 -8px 40px rgba(40, 46, 54, .16);
  --shadow-panel: 8px 0 30px rgba(40, 46, 54, .12);
  --badge-bg: var(--c-raspberry);
  --badge-ink: #ffffff;

  --btn-primary-bg: var(--c-gold);
  --btn-primary-ink: #ffffff;
  --btn-primary-bg-press: #6f6340;
  --btn-secondary-bg: var(--card-2);
  --btn-secondary-ink: var(--ink);
  --btn-secondary-line: var(--line);
  --btn-danger-bg: var(--c-raspberry);
  --btn-danger-ink: #ffffff;

  --tip-mark: #8a6400;
  --tip-bg: #fff8e1;
  --halo: rgba(218, 167, 50, .55);
  --halo-tint: #fff6df;
  --logo-tint: var(--c-gold);

  /* Version 1 names, so the voice and records styles keep working */
  --bg: var(--paper);
  --surface: var(--card);
  --surface-2: var(--card-2);
  --surface-3: var(--card-3);

  /* ---------- 6. Box tokens: the card fill stays bright in both themes, with dark ink on it ---------- */
  /* fill/on/sub: the box card. tint/ink: the round kind icon on a row. deep: the ring of the selected card. */
  --box-on: #1f2a33;
  --box-sub: #3b4650;
  --box-NOUR_TRY-fill: var(--c-pink);
  --box-NOUR_TRY-tint: #fde8ea;
  --box-NOUR_TRY-ink: #8a3341;
  --box-NOUR_TRY-deep: #c4636f;
  --box-NOUR_USD-fill: var(--c-mint);
  --box-NOUR_USD-tint: #e6f4ea;
  --box-NOUR_USD-ink: #255a3d;
  --box-NOUR_USD-deep: #3f8a5f;
  --box-KARIM_TRY-fill: var(--c-cream);
  --box-KARIM_TRY-tint: #fbf1e2;
  --box-KARIM_TRY-ink: #6b4a22;
  --box-KARIM_TRY-deep: #a07a3e;
  --box-KARIM_USD-fill: var(--c-aqua);
  --box-KARIM_USD-tint: #e2f5f4;
  --box-KARIM_USD-ink: #16504e;
  --box-KARIM_USD-deep: #2a8c89;

  /* ---------- 7. Status tokens (one map: word + colour + icon, the words and icons of version 1) ---------- */
  --st-recorded-fg: #3a4651;
  --st-recorded-bg: #e9edf1;
  --st-undoable-fg: #2f5d8a;
  --st-undoable-bg: #e4eef8;
  --st-wafeq_draft-fg: #8a5a1c;
  --st-wafeq_draft-bg: #f8ecd9;
  --st-wafeq_posted-fg: #4f6a25;
  --st-wafeq_posted-bg: #edf3e1;
  --st-wafeq_failed-fg: #9a3412;
  --st-wafeq_failed-bg: #fbe9e1;
  --st-waiting-fg: #a8254a;
  --st-waiting-bg: #fbe6ec;
  --st-cancelled-fg: #5c6670;
  --st-cancelled-bg: #eef0f2;

  /* Money in carries a plus sign and green; money out a minus sign in the ink colour (never colour alone) */
  --money-in: #4f6a25;
  --money-out: var(--ink);
}

/* ---------- 8. Dark theme: the default (data-theme="dark" on <html>), or the device setting when the lab says so ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14191f;
    --card: #1e252c;
    --card-2: #272f38;
    --card-3: #303943;
    --line: #2c353f;
    --line-strong: #3d4955;
    --line-ctl: #707c89;
    --ink: #f3ece0;
    --muted: #a3acb6;
    --gold: #c8b88a;
    --gold-ink: #d6c79c;
    --on-gold: #161b20;
    --gold-foil: #e0b84a;
    --side-bg: #1a2027;
    --nav-on-bg: #272f38;
    --tabbar-bg: rgba(26, 32, 39, .94);
    --row-hover: #242c34;
    --grab: #46525e;
    --attn: #f7a8bf;
    --attn-tint: #4a2131;
    --focus: #81dad8;
    --scrim: rgba(0, 0, 0, .6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, .5);
    --shadow-panel: 8px 0 30px rgba(0, 0, 0, .45);
    --badge-bg: #c43a62;
    --badge-ink: #ffffff;
    --btn-primary-bg: #c8b88a;
    --btn-primary-ink: #161b20;
    --btn-primary-bg-press: #b5a578;
    --btn-secondary-bg: #272f38;
    --btn-secondary-ink: #f3ece0;
    --btn-secondary-line: #3d4955;
    --btn-danger-bg: #c43a62;
    --btn-danger-ink: #ffffff;
    --tip-mark: #f0c84b;
    --tip-bg: #3a3420;
    --halo: rgba(240, 200, 75, .5);
    --halo-tint: #3a3420;
    --logo-tint: var(--c-cream);
    --box-NOUR_TRY-tint: #45303a;
    --box-NOUR_TRY-ink: var(--c-pink);
    --box-NOUR_TRY-deep: var(--c-pink);
    --box-NOUR_USD-tint: #24392f;
    --box-NOUR_USD-ink: var(--c-mint);
    --box-NOUR_USD-deep: var(--c-mint);
    --box-KARIM_TRY-tint: #41372a;
    --box-KARIM_TRY-ink: var(--c-cream);
    --box-KARIM_TRY-deep: var(--c-cream);
    --box-KARIM_USD-tint: #1b3a3b;
    --box-KARIM_USD-ink: var(--c-aqua);
    --box-KARIM_USD-deep: var(--c-aqua);
    --st-recorded-fg: #d5dde6;
    --st-recorded-bg: #34404c;
    --st-undoable-fg: #a9c8ef;
    --st-undoable-bg: #26364a;
    --st-wafeq_draft-fg: #f0c98a;
    --st-wafeq_draft-bg: #43351f;
    --st-wafeq_posted-fg: #bcd98c;
    --st-wafeq_posted-bg: #2f3a20;
    --st-wafeq_failed-fg: #f5a98a;
    --st-wafeq_failed-bg: #48291f;
    --st-waiting-fg: #f7a8bf;
    --st-waiting-bg: #4a2131;
    --st-cancelled-fg: #b4bcc4;
    --st-cancelled-bg: #353c44;
    --money-in: #bcd98c;
    --money-out: var(--ink);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14191f;
  --card: #1e252c;
  --card-2: #272f38;
  --card-3: #303943;
  --line: #2c353f;
  --line-strong: #3d4955;
  --line-ctl: #707c89;
  --ink: #f3ece0;
  --muted: #a3acb6;
  --gold: #c8b88a;
  --gold-ink: #d6c79c;
  --on-gold: #161b20;
  --gold-foil: #e0b84a;
  --side-bg: #1a2027;
  --nav-on-bg: #272f38;
  --tabbar-bg: rgba(26, 32, 39, .94);
  --row-hover: #242c34;
  --grab: #46525e;
  --attn: #f7a8bf;
  --attn-tint: #4a2131;
  --focus: #81dad8;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, .5);
  --shadow-panel: 8px 0 30px rgba(0, 0, 0, .45);
  --badge-bg: #c43a62;
  --badge-ink: #ffffff;
  --btn-primary-bg: #c8b88a;
  --btn-primary-ink: #161b20;
  --btn-primary-bg-press: #b5a578;
  --btn-secondary-bg: #272f38;
  --btn-secondary-ink: #f3ece0;
  --btn-secondary-line: #3d4955;
  --btn-danger-bg: #c43a62;
  --btn-danger-ink: #ffffff;
  --tip-mark: #f0c84b;
  --tip-bg: #3a3420;
  --halo: rgba(240, 200, 75, .5);
  --halo-tint: #3a3420;
  --logo-tint: var(--c-cream);
  --box-NOUR_TRY-tint: #45303a;
  --box-NOUR_TRY-ink: var(--c-pink);
  --box-NOUR_TRY-deep: var(--c-pink);
  --box-NOUR_USD-tint: #24392f;
  --box-NOUR_USD-ink: var(--c-mint);
  --box-NOUR_USD-deep: var(--c-mint);
  --box-KARIM_TRY-tint: #41372a;
  --box-KARIM_TRY-ink: var(--c-cream);
  --box-KARIM_TRY-deep: var(--c-cream);
  --box-KARIM_USD-tint: #1b3a3b;
  --box-KARIM_USD-ink: var(--c-aqua);
  --box-KARIM_USD-deep: var(--c-aqua);
  --st-recorded-fg: #d5dde6;
  --st-recorded-bg: #34404c;
  --st-undoable-fg: #a9c8ef;
  --st-undoable-bg: #26364a;
  --st-wafeq_draft-fg: #f0c98a;
  --st-wafeq_draft-bg: #43351f;
  --st-wafeq_posted-fg: #bcd98c;
  --st-wafeq_posted-bg: #2f3a20;
  --st-wafeq_failed-fg: #f5a98a;
  --st-wafeq_failed-bg: #48291f;
  --st-waiting-fg: #f7a8bf;
  --st-waiting-bg: #4a2131;
  --st-cancelled-fg: #b4bcc4;
  --st-cancelled-bg: #353c44;
  --money-in: #bcd98c;
  --money-out: var(--ink);
}

/* ---------- 9. Reduced motion zeroes every duration ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
    --dur-odo: 0.01ms;
    --dur-count: 0.01ms;
    --dur-glow: 0.01ms;
    --rise: 0px;
  }
}
:root[data-motion="off"] {
  --dur-1: 0.01ms;
  --dur-2: 0.01ms;
  --dur-3: 0.01ms;
  --dur-odo: 0.01ms;
  --dur-count: 0.01ms;
  --dur-glow: 0.01ms;
  --rise: 0px;
}