/* DeepSync design tokens. Every colour, font, radius and shadow of the platform lives here, and only here.
   The palette is the approved DeepSync one (Part 12). Two of its colours are too light for text on white, so
   each has a darker partner for text and buttons (checked to WCAG AA, 4.5 : 1):
     Teal #0D9488 (3.7 : 1)  -> accents, bars, icons;   Teal for actions #0F766E (5.5 : 1) -> buttons, text
     Sky  #3B82F6 (3.7 : 1)  -> highlights;             Blue for links  #2563EB (5.2 : 1) -> links
     Gold #D6A85F (2.2 : 1)  -> small details only, never text.
   Dark mode follows the device, unless the person chose light or dark (html[data-theme]). */

/* Inter (English, German) and IBM Plex Sans Arabic (Arabic), both SIL Open Font License, kept on this server. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  /* The palette */
  --navy: #172B4D; --teal: #0D9488; --teal-ui: #0F766E; --sky: #3B82F6; --blue-ui: #2563EB; --gold: #D6A85F;
  --warm-white: #FAFBFC; --grey-blue: #EEF3F7; --white: #FFFFFF;

  /* What the parts use */
  --bg: var(--warm-white); --card: var(--white); --surface-2: var(--grey-blue); --line: #DCE3EB; --line-strong: #C5D0DC;
  --text: #1B2537; --heading: var(--navy); --muted: #536079;
  --brand: var(--teal-ui); --on-brand: #FFFFFF; --brand-soft: #DDF1EE; --accent: var(--teal); --info: var(--sky);
  --link: var(--blue-ui); --focus: var(--teal);
  --nav: var(--navy); --on-nav: #FFFFFF; --nav-muted: #C3CEDD; --nav-hover: rgba(255, 255, 255, .10); --nav-on: rgba(255, 255, 255, .16);
  --bar: var(--navy); --on-bar: #FFFFFF; --bar-hover: rgba(255, 255, 255, .14);
  --ok: #1F6B45; --ok-soft: #E3F2E9; --warn: #7A5000; --warn-soft: #FBF0D9; --danger: #B3362B; --danger-soft: #FBEAE7;
  --info-text: #1D4ED8; --info-soft: #E6EEFE;

  /* Shape, depth, space */
  --radius: 14px; --radius-lg: 16px; --radius-btn: 10px; --radius-icon: 12px; --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(23, 43, 77, .06), 0 1px 3px rgba(23, 43, 77, .06);
  --shadow-hover: 0 6px 18px rgba(23, 43, 77, .10);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --side-w: 16.5rem;

  /* Type */
  --font: Inter, 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', Tahoma, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', Inter, system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;
  --fs-small: .875rem; --fs-body: 1rem; --fs-h3: 1.05rem; --fs-h2: 1.2rem; --fs-h1: 1.65rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1424; --card: #13203A; --surface-2: #1C2B48; --line: #26385A; --line-strong: #34496F;
    --text: #E8EEF6; --heading: #F2F6FB; --muted: #A9B6CA;
    --brand: #2DD4BF; --on-brand: #0B1424; --brand-soft: #123A3A; --accent: #2DD4BF; --info: #60A5FA;
    --link: #93B8FF; --focus: #5EEAD4;
    --nav: #0F1D36; --on-nav: #FFFFFF; --nav-muted: #A9B6CA; --nav-hover: rgba(255, 255, 255, .08); --nav-on: rgba(255, 255, 255, .14);
    --bar: #0F1D36; --on-bar: #FFFFFF; --bar-hover: rgba(255, 255, 255, .12);
    --ok: #8FD6A8; --ok-soft: #1C3326; --warn: #F0C46C; --warn-soft: #3A2F17; --danger: #F19A90; --danger-soft: #3D201D;
    --info-text: #A9C6FF; --info-soft: #1A2A4D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-hover: 0 6px 18px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1424; --card: #13203A; --surface-2: #1C2B48; --line: #26385A; --line-strong: #34496F;
  --text: #E8EEF6; --heading: #F2F6FB; --muted: #A9B6CA;
  --brand: #2DD4BF; --on-brand: #0B1424; --brand-soft: #123A3A; --accent: #2DD4BF; --info: #60A5FA;
  --link: #93B8FF; --focus: #5EEAD4;
  --nav: #0F1D36; --on-nav: #FFFFFF; --nav-muted: #A9B6CA; --nav-hover: rgba(255, 255, 255, .08); --nav-on: rgba(255, 255, 255, .14);
  --bar: #0F1D36; --on-bar: #FFFFFF; --bar-hover: rgba(255, 255, 255, .12);
  --ok: #8FD6A8; --ok-soft: #1C3326; --warn: #F0C46C; --warn-soft: #3A2F17; --danger: #F19A90; --danger-soft: #3D201D;
  --info-text: #A9C6FF; --info-soft: #1A2A4D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-hover: 0 6px 18px rgba(0, 0, 0, .35);
  color-scheme: dark;
}