/* Halaqa design tokens: the only file allowed to contain literal colors.
   See docs/branding.md. Every component reads these custom properties, so a
   theme only redefines tokens. test/assets/stylesheet_tokens_test.rb keeps
   both dark blocks identical and other stylesheets free of literal colors. */

/* Alexandria (display) and IBM Plex Sans Arabic (body) both cover Arabic and
   Latin. Self-hosted for CSP (font-src 'self'), privacy, and offline use;
   unicode-range means a page downloads only the scripts it renders.
   Licenses: app/assets/fonts/licenses. */
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/alexandria-arabic-wght-74cc349a.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: "Alexandria";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/alexandria-latin-wght-49e9de4c.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: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-arabic-arabic-400-cca48952.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("/assets/ibm-plex-sans-arabic-arabic-500-4f6d4c5d.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("/assets/ibm-plex-sans-arabic-arabic-600-979c249d.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("/assets/ibm-plex-sans-arabic-arabic-700-86ce0338.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("/assets/ibm-plex-sans-arabic-latin-400-5e436302.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/ibm-plex-sans-arabic-latin-500-bebea651.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/ibm-plex-sans-arabic-latin-600-a983e968.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/ibm-plex-sans-arabic-latin-700-fe7abb22.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;
}

:root {
  color-scheme: light;

  /* Typography */
  --font-display: "Alexandria", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text-display: 2.25rem;
  --text-title: 1.5rem;
  --text-subtitle: 1.25rem;
  --text-heading: 1.125rem;
  --text-lead: 1rem;
  --text-body: .9375rem;
  --text-small: .8125rem;
  --text-label: .75rem;
  --text-micro: .6875rem;

  /* Shape, motion, and layout */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: .15s;
  --sidebar-compact: 76px;
  --sidebar-width: 252px;
  --content-max: 1480px;
  --content-gutter: clamp(1rem, 2vw, 2rem);

  /* Color: light theme */
  --bg: #f2f4f0;
  --surface: #ffffff;
  --surface-soft: #eef2ee;
  --ink: #10201d;
  --muted: #4c5f5a;
  --border: #dbe3dd;
  --border-strong: #c3cec7;
  --brand: #0f766e;
  --brand-dark: #0b5a52;
  --brand-light: #dcf2ec;
  --on-brand: #ffffff;
  --accent: #c08a1e;
  --accent-light: #fbf0d6;
  --accent-ink: #7a5408;
  --info: #2457d6;
  --info-bg: #e6edfd;
  --warning: #a14f08;
  --warning-bg: #fdefdf;
  --danger: #b42318;
  --danger-bg: #fce8e6;
  --violet: #6b4c9a;
  --violet-bg: #f2ecfa;
  --sidebar-bg: #0a2f2b;
  --sidebar-raised: #11403a;
  --sidebar-ink: #e2efeb;
  --sidebar-muted: #93b5ad;
  --shadow-color: #10201d;

  /* Derived roles: defined once, they follow whichever theme is active. */
  --success: var(--brand);
  --success-bg: var(--brand-light);
  --brand-border: color-mix(in srgb, var(--brand) 32%, var(--surface));
  --success-border: var(--brand-border);
  --accent-border: color-mix(in srgb, var(--accent) 45%, var(--surface));
  --info-border: color-mix(in srgb, var(--info) 30%, var(--surface));
  --warning-border: color-mix(in srgb, var(--warning) 32%, var(--surface));
  --danger-border: color-mix(in srgb, var(--danger) 32%, var(--surface));
  --focus-ring: color-mix(in srgb, var(--brand) 28%, transparent);
  --overlay: color-mix(in srgb, var(--sidebar-bg) 45%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--shadow-color) 7%, transparent),
               0 1px 1px color-mix(in srgb, var(--shadow-color) 4%, transparent);
  --shadow: 0 2px 4px color-mix(in srgb, var(--shadow-color) 5%, transparent),
            0 12px 28px color-mix(in srgb, var(--shadow-color) 9%, transparent);
  --shadow-lg: 0 4px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent),
               0 24px 56px color-mix(in srgb, var(--shadow-color) 16%, transparent);
}

/* Dark theme. "System" sets no data-theme attribute and follows the OS; an
   explicit choice sets data-theme on <html>. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1211;
    --surface: #111c1a;
    --surface-soft: #172422;
    --ink: #e3eeea;
    --muted: #9db2ab;
    --border: #22332f;
    --border-strong: #2f4541;
    --brand: #36c3ae;
    --brand-dark: #63d8c5;
    --brand-light: #0f312c;
    --on-brand: #04201c;
    --accent: #e2b451;
    --accent-light: #2c2310;
    --accent-ink: #ebc877;
    --info: #85a6ff;
    --info-bg: #152039;
    --warning: #f0a560;
    --warning-bg: #33220f;
    --danger: #ff8b7f;
    --danger-bg: #3a1714;
    --violet: #c4a8f0;
    --violet-bg: #251b36;
    --sidebar-bg: #060e0d;
    --sidebar-raised: #10221f;
    --sidebar-ink: #dcebe6;
    --sidebar-muted: #84a59d;
    --shadow-color: #000000;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0a1211;
  --surface: #111c1a;
  --surface-soft: #172422;
  --ink: #e3eeea;
  --muted: #9db2ab;
  --border: #22332f;
  --border-strong: #2f4541;
  --brand: #36c3ae;
  --brand-dark: #63d8c5;
  --brand-light: #0f312c;
  --on-brand: #04201c;
  --accent: #e2b451;
  --accent-light: #2c2310;
  --accent-ink: #ebc877;
  --info: #85a6ff;
  --info-bg: #152039;
  --warning: #f0a560;
  --warning-bg: #33220f;
  --danger: #ff8b7f;
  --danger-bg: #3a1714;
  --violet: #c4a8f0;
  --violet-bg: #251b36;
  --sidebar-bg: #060e0d;
  --sidebar-raised: #10221f;
  --sidebar-ink: #dcebe6;
  --sidebar-muted: #84a59d;
  --shadow-color: #000000;
  color-scheme: dark;
}