/* EgyptAuth — design tokens. Every colour, size and duration used by the UI lives here. */

@font-face { font-family: "Geist"; src: url("/fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("/fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("/fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("/fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* Neutrals — "lapis night": blue-black surfaces taken from the emblem's shield */
  --bg: #0c1018;
  --surface: #111724;
  --raised: #171f30;
  --hover: #1c2538;
  --active: #232e45;
  --border: #20293b;
  --border-strong: #2b364d;
  --border-focus: #3e4b67;

  /* Text — warm papyrus white over cool surfaces */
  --text: #ebe8e1;
  --text-2: #aab1c0;
  --text-3: #8d96a9;   /* muted, still ≥ 4.5:1 on --surface */
  --text-4: #687187;   /* decorative / disabled only */

  /* Interaction (lapis) — focus, links, switches, loading */
  --accent: #4d7cf0;
  --accent-text: #8fb0fb;
  --accent-soft: rgba(77, 124, 240, 0.14);
  --accent-line: rgba(77, 124, 240, 0.45);

  /* Signature (gold) — primary actions and "you are here" markers only */
  --gold: #d7a83f;
  --gold-text: #e7c063;
  --gold-soft: rgba(215, 168, 63, 0.12);
  --gold-line: rgba(215, 168, 63, 0.4);
  --brand-egypt: #e3b54f;
  --brand-auth: #6b9bff;
  --emblem-glow: rgba(215, 168, 63, 0.2);

  /* Semantic */
  --red: #e5484d;
  --red-text: #f2777b;
  --red-soft: rgba(229, 72, 77, 0.12);
  --red-line: rgba(229, 72, 77, 0.34);
  --red-hover: #ef5a5f;
  --amber: #f0a43a;
  --amber-text: #f5b95c;
  --amber-soft: rgba(240, 164, 58, 0.12);
  --amber-line: rgba(240, 164, 58, 0.32);
  --blue: #4d7cf0;
  --blue-text: #8fb0fb;
  --blue-soft: rgba(77, 124, 240, 0.13);
  --blue-line: rgba(77, 124, 240, 0.34);
  --green: #35b07f;
  --green-text: #5cc99c;
  --green-soft: rgba(53, 176, 127, 0.12);
  --green-line: rgba(53, 176, 127, 0.32);
  --gray-soft: rgba(170, 177, 192, 0.1);
  --gray-line: rgba(170, 177, 192, 0.22);
  --tint-amber: rgba(240, 164, 58, 0.05);
  --tint-red: rgba(229, 72, 77, 0.05);
  --tint-green: rgba(53, 176, 127, 0.05);

  /* Primary button (gold) */
  --primary-bg: #d7a83f;
  --primary-bg-hover: #e4b752;
  --primary-text: #1a1305;
  --on-solid: #ffffff;

  /* Component surfaces that used to be hard-coded */
  --row-hover: #141b2a;
  --nav-active: #182033;
  --row-selected: rgba(77, 124, 240, 0.07);
  --row-expanded: #131a28;
  --well: #0e131d;
  --card-hover: #131a28;
  --skeleton-a: #161d2c;
  --skeleton-b: #1d2639;
  --scrollbar: #283247;
  --scrollbar-hover: #36425c;
  --selection: rgba(77, 124, 240, 0.35);
  --overlay: rgba(4, 6, 11, 0.72);
  --topbar-bg: rgba(12, 16, 24, 0.94);
  --switch-knob: #ffffff;
  --code-key: #c6cbd6;
  --chart-grid: rgba(255, 255, 255, 0.05);
  --chart-primary: #ebe8e1;
  --chart-accent: #4d7cf0;
  --chart-gold: #d7a83f;
  --chart-red: #e5484d;
  --chart-amber: #f0a43a;
  --chart-blue: #6b9bff;
  --chart-gray: #687187;
  --chart-green: #35b07f;

  /* Type */
  --font-sans: "Geist", "Plex Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --lh: 1.5;

  /* Shape */
  --r-sm: 6px;
  --r: 9px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Space (4px grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;

  /* Elevation — popovers and dialogs only */
  --shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 8px 24px -6px rgba(0, 0, 0, 0.6);
  --shadow-dialog: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 24px 64px -12px rgba(0, 0, 0, 0.75);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t: 160ms;
  --t-slow: 240ms;

  /* Layout */
  --sidebar-w: 252px;
  --rail-w: 72px;
  --header-h: 68px;
  --content-max: 1440px;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-line);
}

/* Light — "limestone": cool stone greys, ink-blue text, deeper gold so it holds contrast on white. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f3f4f7;
  --surface: #ffffff;
  --raised: #f6f7f9;
  --hover: #eceef3;
  --active: #e3e7ee;
  --border: #e0e4eb;
  --border-strong: #cfd5df;
  --border-focus: #a7b1c2;

  --text: #121826;
  --text-2: #3d4657;
  --text-3: #5a6375;
  --text-4: #8b94a5;

  --accent: #2456d3;
  --accent-text: #1d4bbd;
  --accent-soft: rgba(36, 86, 211, 0.1);
  --accent-line: rgba(36, 86, 211, 0.4);

  --gold: #b8871f;
  --gold-text: #87600f;
  --gold-soft: rgba(184, 135, 31, 0.12);
  --gold-line: rgba(184, 135, 31, 0.45);
  --brand-egypt: #a8790f;
  --brand-auth: #1d4bbd;
  --emblem-glow: rgba(184, 135, 31, 0.18);

  --red: #d93b41;
  --red-text: #b4232a;
  --red-soft: rgba(217, 59, 65, 0.09);
  --red-line: rgba(217, 59, 65, 0.35);
  --red-hover: #c4302f;
  --amber: #d98a14;
  --amber-text: #8f5600;
  --amber-soft: rgba(217, 138, 20, 0.11);
  --amber-line: rgba(217, 138, 20, 0.38);
  --blue: #2456d3;
  --blue-text: #1d4bbd;
  --blue-soft: rgba(36, 86, 211, 0.09);
  --blue-line: rgba(36, 86, 211, 0.32);
  --green: #1f9a68;
  --green-text: #13734d;
  --green-soft: rgba(31, 154, 104, 0.1);
  --green-line: rgba(31, 154, 104, 0.34);
  --gray-soft: rgba(61, 70, 87, 0.07);
  --gray-line: rgba(61, 70, 87, 0.2);
  --tint-amber: rgba(217, 138, 20, 0.06);
  --tint-red: rgba(217, 59, 65, 0.05);
  --tint-green: rgba(31, 154, 104, 0.06);

  --primary-bg: #c99729;
  --primary-bg-hover: #b8871f;
  --primary-text: #1a1305;
  --on-solid: #ffffff;

  --row-hover: #f6f7fa;
  --nav-active: #e6e9f0;
  --row-selected: rgba(36, 86, 211, 0.06);
  --row-expanded: #f8f9fb;
  --well: #f4f6f9;
  --card-hover: #fbfbfc;
  --skeleton-a: #eceef2;
  --skeleton-b: #f5f6f8;
  --scrollbar: #cdd3dd;
  --scrollbar-hover: #b3bccb;
  --selection: rgba(36, 86, 211, 0.2);
  --overlay: rgba(18, 24, 38, 0.38);
  --topbar-bg: rgba(255, 255, 255, 0.94);
  --switch-knob: #ffffff;
  --code-key: #2b3445;
  --chart-grid: rgba(18, 24, 38, 0.07);
  --chart-primary: #1d2638;
  --chart-accent: #2456d3;
  --chart-gold: #b8871f;
  --chart-red: #d93b41;
  --chart-amber: #d98a14;
  --chart-blue: #2456d3;
  --chart-gray: #8b94a5;
  --chart-green: #1f9a68;

  --shadow-pop: 0 0 0 1px rgba(18, 24, 38, 0.06), 0 8px 24px -6px rgba(18, 24, 38, 0.18);
  --shadow-dialog: 0 0 0 1px rgba(18, 24, 38, 0.06), 0 24px 64px -12px rgba(18, 24, 38, 0.3);
  --shadow-float: 0 8px 24px rgba(18, 24, 38, 0.14);
}

:root[lang="ar"] {
  --font-sans: "Plex Arabic", "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}