/* Design tokens — direction «الجلد». Every color, radius and font in the app comes from here. */

@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-display: swap; src: url("/fonts/NotoSansArabic-Regular.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 500; font-display: swap; src: url("/fonts/NotoSansArabic-Medium.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 600; font-display: swap; src: url("/fonts/NotoSansArabic-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 500; font-display: swap; src: url("/fonts/NotoKufiArabic-Medium.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 600; font-display: swap; src: url("/fonts/NotoKufiArabic-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 700; font-display: swap; src: url("/fonts/NotoKufiArabic-Bold.woff2") format("woff2"); }

:root {
  /* Brand surface (side menu, primary buttons) */
  --deep: #3a121f;
  --deep-2: #521a2b;
  --deep-3: #6a2437;
  --on-deep: #ecdcd8;
  --on-deep-mute: #b9968f;

  /* Accent */
  --metal: #b88a3b;
  --metal-soft: #f1e3c4;

  /* Neutrals */
  --paper: #f3f0ed;
  --surface: #ffffff;
  --sunk: #f8f5f2;
  --line: #e5ddd8;
  --line-2: #d5cac4;
  --ink: #231a1c;
  --ink-2: #4b3f41;
  --mute: #7c6e6a;

  /* Status */
  --pend-bg: #f6e8c2;
  --pend: #6a4b06;
  --ok-bg: #dcefe2;
  --ok: #1c5a39;
  --no-bg: #f8dfdb;
  --no: #8a2a17;

  /* Shape */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(58, 18, 31, .06), 0 8px 24px -12px rgba(58, 18, 31, .18);

  /* Type */
  --font-text: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-heading: "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* SS deployment. Placeholder colors until the owner supplies the brand's own. */
:root[data-brand="ss"] {
  --deep: #10343a;
  --deep-2: #16464e;
  --deep-3: #1e5962;
  --on-deep: #d9e9ea;
  --on-deep-mute: #8fb3b6;
  --shadow: 0 1px 2px rgba(16, 52, 58, .06), 0 8px 24px -12px rgba(16, 52, 58, .2);
}