/* ==========================================================================
   R20 Hosting · DR Control — design tokens
   Calm blue, glass surfaces. Light first, dark via [data-theme="dark"].
   Every colour used by components comes from here (no raw hex in components).
   ========================================================================== */

/* ---- Fonts (self-hosted, work offline) ---------------------------------- */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/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+0898-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("../assets/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+0898-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("../assets/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+0898-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("../assets/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+0898-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("../assets/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("../assets/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("../assets/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("../assets/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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ---- Light theme (default) ---------------------------------------------- */
:root {
  color-scheme: light;

  --font-sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* canvas */
  --bg-0: #e9f1ff;
  --bg-1: #f6f9ff;
  --blob-1: #7aa7ff;
  --blob-2: #5fd3e8;
  --blob-3: #a9b6ff;
  --blob-opacity: .55;

  /* text (all pairs below checked >= 4.5:1 on --surface-solid) */
  --text: #0d1a33;
  --text-2: #36466a;
  --text-3: #55668a;
  --text-on-primary: #ffffff;

  /* surfaces */
  --surface: rgba(255, 255, 255, .68);
  --surface-2: rgba(255, 255, 255, .46);
  --surface-solid: #ffffff;
  --surface-sunken: rgba(14, 40, 96, .045);
  --overlay: rgba(10, 22, 48, .42);
  --border: rgba(14, 40, 96, .10);
  --border-strong: rgba(14, 40, 96, .20);
  --glass-edge: rgba(255, 255, 255, .85);

  /* brand */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: rgba(37, 99, 235, .10);
  --primary-text: #1d4ed8;
  --accent: #0e7490;
  --accent-soft: rgba(8, 145, 178, .12);
  --ring: #2563eb;

  /* status */
  --ok: #15803d;        --ok-bright: #22c55e;   --ok-soft: rgba(22, 163, 74, .12);
  --warn: #a16207;      --warn-bright: #f59e0b; --warn-soft: rgba(217, 119, 6, .14);
  --crit: #b91c1c;      --crit-bright: #ef4444; --crit-soft: rgba(220, 38, 38, .11);
  --info: #1d4ed8;      --info-bright: #3b82f6; --info-soft: rgba(37, 99, 235, .10);
  --on-solid-ok: #ffffff; --solid-ok: #15803d;
  --solid-crit: #b91c1c;  --solid-warn: #a16207;

  /* effects */
  --shadow-1: 0 1px 2px rgba(16, 42, 99, .06), 0 10px 28px -12px rgba(16, 42, 99, .16);
  --shadow-2: 0 2px 4px rgba(16, 42, 99, .06), 0 24px 56px -16px rgba(16, 42, 99, .26);
  --shadow-glow: 0 0 0 1px rgba(37, 99, 235, .18), 0 10px 30px -8px rgba(37, 99, 235, .35);
  --blur: 18px;
  --chart-grid: rgba(14, 40, 96, .09);
  --chart-bar: #3b82f6;
  --chart-bar-soft: rgba(59, 130, 246, .28);

  /* shape + spacing + motion */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 150ms; --t-med: 260ms; --t-slow: 480ms;

  --sidebar-w: 272px;
  --topbar-h: 68px;
  --z-sidebar: 30; --z-topbar: 20; --z-modal: 60; --z-toast: 80; --z-demo: 50;
}

/* ---- Dark theme --------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-0: #060c1a;
  --bg-1: #0a1428;
  --blob-1: #1e4fd8;
  --blob-2: #0e8fb0;
  --blob-3: #4338ca;
  --blob-opacity: .42;

  --text: #e9effc;
  --text-2: #b0bedb;
  --text-3: #8d9fc4;
  --text-on-primary: #08122a;

  --surface: rgba(19, 32, 60, .62);
  --surface-2: rgba(19, 32, 60, .40);
  --surface-solid: #11203d;
  --surface-sunken: rgba(120, 160, 255, .07);
  --overlay: rgba(2, 6, 16, .62);
  --border: rgba(150, 180, 240, .15);
  --border-strong: rgba(150, 180, 240, .28);
  --glass-edge: rgba(190, 210, 255, .16);

  --primary: #6b9bff;
  --primary-hover: #8ab0ff;
  --primary-soft: rgba(107, 155, 255, .15);
  --primary-text: #9bbcff;
  --accent: #5fd3e8;
  --accent-soft: rgba(95, 211, 232, .14);
  --ring: #9bbcff;

  --ok: #4ade80;        --ok-bright: #4ade80;   --ok-soft: rgba(74, 222, 128, .14);
  --warn: #fbbf24;      --warn-bright: #fbbf24; --warn-soft: rgba(251, 191, 36, .15);
  --crit: #f87171;      --crit-bright: #f87171; --crit-soft: rgba(248, 113, 113, .15);
  --info: #9bbcff;      --info-bright: #6b9bff; --info-soft: rgba(107, 155, 255, .15);
  --on-solid-ok: #052e16; --solid-ok: #4ade80;
  --solid-crit: #f87171;  --solid-warn: #fbbf24;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .65);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 64px -18px rgba(0, 0, 0, .8);
  --shadow-glow: 0 0 0 1px rgba(107, 155, 255, .35), 0 0 34px -6px rgba(107, 155, 255, .45);
  --chart-grid: rgba(150, 180, 240, .12);
  --chart-bar: #6b9bff;
  --chart-bar-soft: rgba(107, 155, 255, .3);
}