/* SignalPlus design tokens. Light by default; dark when the system asks for it (data-theme="system") or the user
   chose it (data-theme="dark"). Corner radii: 4px chips, 6px controls, 8px cards, 12px dialogs, full pills for status
   badges and avatars. */

@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: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-500-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; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  --font-sans: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (fixed rem): 12 / 13 / 14 / 16 / 20 / 24 / 30. */
  --text-xs: 0.75rem;   --lh-xs: 1.125rem;
  --text-sm: 0.8125rem; --lh-sm: 1.25rem;
  --text-md: 0.875rem;  --lh-md: 1.375rem;
  --text-lg: 1rem;      --lh-lg: 1.5rem;
  --text-xl: 1.25rem;   --lh-xl: 1.75rem;
  --text-2xl: 1.5rem;   --lh-2xl: 2rem;
  --text-3xl: 1.875rem; --lh-3xl: 2.375rem;

  /* Spacing: 4px steps. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  --r-chip: 4px;
  --r-control: 6px;
  --r-card: 8px;
  --r-dialog: 12px;
  --r-pill: 999px;

  --sidebar-width: 256px;
  --topbar-height: 56px;
  --content-max: 1440px;

  /* Surfaces and text. */
  --page: #F9FAFB;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-muted: #F3F4F6;
  --surface-hover: #F3F4F6;
  --surface-header: #F9FAFB;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --divider: #F3F4F6;
  --text: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --text-on-accent: #FFFFFF;

  /* The one accent: primary actions, the current navigation item, selection, the main chart series. */
  --accent: #1A73E8;
  --accent-hover: #1765CC;
  --accent-pressed: #185ABC;
  --accent-soft: #E8F0FE;
  --accent-soft-hover: #D2E3FC;
  --accent-text: #1967D2;
  --focus: #1A73E8;

  /* State colours: only where they carry meaning. */
  --danger: #D93025;
  --danger-hover: #C5221F;
  --danger-text: #B3261E;
  --danger-soft: #FCE8E6;
  --danger-border: #F6AEA9;
  --warning: #E37400;
  --warning-text: #8A4B00;
  --warning-soft: #FEF7E0;
  --warning-border: #FBD38D;
  --success: #188038;
  --success-text: #137333;
  --success-soft: #E6F4EA;
  --success-border: #A8DAB5;
  --neutral-soft: #F3F4F6;
  --neutral-text: #374151;

  /* Chart series, in this fixed order (never cycled). Validated with the dataviz validator against #FFFFFF and
     #16181D: adjacent CVD dE >= 9.1 light / 8.4 dark; the first three pass all-pairs. Slots 3-5 are under 3:1 on
     white, so charts that use them carry direct labels or a table view. Status colours are never a series. */
  --series-1: #1A73E8;
  --series-2: #EB6834;
  --series-3: #1BAF7A;
  --series-4: #EDA100;
  --series-5: #E87BA4;
  --series-6: #008300;
  --series-7: #4A3AA7;
  --series-8: #E34948;
  --chart-grid: #EEF0F2;
  --chart-axis: #D1D5DB;

  --shadow-xs: 0 1px 2px rgb(17 24 39 / 0.04);
  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.06), 0 1px 3px rgb(17 24 39 / 0.04);
  --shadow-popover: 0 8px 24px -4px rgb(17 24 39 / 0.14), 0 2px 6px -2px rgb(17 24 39 / 0.08);
  --shadow-dialog: 0 24px 56px -12px rgb(17 24 39 / 0.28), 0 4px 12px -4px rgb(17 24 39 / 0.10);
  --scrim: rgb(17 24 39 / 0.40);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;

  /* Layers. */
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-popover: 40;
  --z-dialog: 50;
  --z-toast: 60;
}

/* Dark: chosen explicitly (data-theme="dark"), or following the system when the preference is "system". The palette
   is repeated for the media query because CSS cannot share a declaration block between the two. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0F1115; --surface: #16181D; --surface-raised: #1C1F25; --surface-muted: #1F2229; --surface-hover: #22262D;
  --surface-header: #1A1D22; --border: #2A2E36; --border-strong: #3A3F49; --divider: #22262D;
  --text: #E8EAED; --text-secondary: #C4C8CF; --text-muted: #9AA0A9; --text-disabled: #6B717B; --text-on-accent: #0F1115;
  --accent: #8AB4F8; --accent-hover: #A1C2FA; --accent-pressed: #AECBFA; --accent-soft: #1E2A3D; --accent-soft-hover: #25344B;
  --accent-text: #8AB4F8; --focus: #8AB4F8;
  --danger: #F28B82; --danger-hover: #F6AEA9; --danger-text: #F28B82; --danger-soft: #3A1E1D; --danger-border: #6B2C28;
  --warning: #FDD663; --warning-text: #FDD663; --warning-soft: #3A3018; --warning-border: #6B5520;
  --success: #81C995; --success-text: #81C995; --success-soft: #1B3224; --success-border: #2D5A3B;
  --neutral-soft: #22262D; --neutral-text: #C4C8CF;
  --series-1: #3987E5; --series-2: #D95926; --series-3: #199E70; --series-4: #C98500; --series-5: #D55181; --series-6: #008300; --series-7: #9085E9; --series-8: #E66767;
  --chart-grid: #22262D; --chart-axis: #2A2E36;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.25);
  --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.40);
  --shadow-dialog: 0 24px 56px -12px rgb(0 0 0 / 0.65), 0 4px 12px -4px rgb(0 0 0 / 0.40);
  --scrim: rgb(0 0 0 / 0.60);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"], :root:not([data-theme]) {
    color-scheme: dark;
    --page: #0F1115; --surface: #16181D; --surface-raised: #1C1F25; --surface-muted: #1F2229; --surface-hover: #22262D;
    --surface-header: #1A1D22; --border: #2A2E36; --border-strong: #3A3F49; --divider: #22262D;
    --text: #E8EAED; --text-secondary: #C4C8CF; --text-muted: #9AA0A9; --text-disabled: #6B717B; --text-on-accent: #0F1115;
    --accent: #8AB4F8; --accent-hover: #A1C2FA; --accent-pressed: #AECBFA; --accent-soft: #1E2A3D; --accent-soft-hover: #25344B;
    --accent-text: #8AB4F8; --focus: #8AB4F8;
    --danger: #F28B82; --danger-hover: #F6AEA9; --danger-text: #F28B82; --danger-soft: #3A1E1D; --danger-border: #6B2C28;
    --warning: #FDD663; --warning-text: #FDD663; --warning-soft: #3A3018; --warning-border: #6B5520;
    --success: #81C995; --success-text: #81C995; --success-soft: #1B3224; --success-border: #2D5A3B;
    --neutral-soft: #22262D; --neutral-text: #C4C8CF;
    --series-1: #3987E5; --series-2: #D95926; --series-3: #199E70; --series-4: #C98500; --series-5: #D55181; --series-6: #008300; --series-7: #9085E9; --series-8: #E66767;
    --chart-grid: #22262D; --chart-axis: #2A2E36;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.25);
    --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.40);
    --shadow-dialog: 0 24px 56px -12px rgb(0 0 0 / 0.65), 0 4px 12px -4px rgb(0 0 0 / 0.40);
    --scrim: rgb(0 0 0 / 0.60);
  }
}