/* TARKIT design system for the OS. One source for every screen (index, workflow, scene, graph).
   From the "New - Tarkit Design System" (claude.ai artifact GDxXV4pXxgGxc1Ekff1yfp, tokens.json v1, 4 Nov 2026).
   Brand tokens keep the system's names; the app tokens under them (--bg, --panel, --text ...) are what screens use.
   Light = the system's Light theme (white ground, purple accent). Dark = its Dark theme (black ground, yellow accent).
   Flat colour, no shadows or glows, Hubot Sans for English and Dubai for Arabic. */

@font-face{font-family:"Hubot Sans";src:url(/fonts/HubotSans-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Hubot Sans";src:url(/fonts/HubotSans-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hubot Sans";src:url(/fonts/HubotSans-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Hubot Sans";src:url(/fonts/HubotSans-MediumItalic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Hubot Sans";src:url(/fonts/HubotSans-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hubot Sans";src:url(/fonts/HubotSans-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Hubot Sans";src:url(/fonts/HubotSans-ExtraBold.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:"Dubai";src:url(/fonts/DubaiW23-Regular.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Dubai";src:url(/fonts/DubaiW23-Bold.woff2) format("woff2");font-weight:600 900;font-style:normal;font-display:swap}

:root{
  /* Palette (tokens.json color). Screen colours purple and yellow carry a layout, black supports, the rest are touches. */
  --purple:#6631D7; --yellow:#F9FE56; --white:#FFFFFF; --orchid:#D249D9; --pink:#D93386; --black:#0A0000;
  --soft-yellow:#FDEE66; --deep-purple:#5E43AA; --lavender:#F1E6F6; --violet:#8B57F1;
  /* Ramps: tonal fills, states, chart series. Never new brand colours. */
  --purple-1:#2F2255; --purple-2:#473280; --purple-3:#5E43AA; --purple-4:#7E69BB;
  --yellow-2:#FDF185; --yellow-3:#FEF5A3; --yellow-4:#FEF8C2;
  --white-1:#E5E6E5; --white-2:#D9D9D9; --white-3:#CCCCCC; --white-4:#BFBFBF;
  --orchid-1:#69256D; --orchid-2:#9E37A3; --orchid-3:#DB6DE1; --orchid-4:#E492E8;
  --pink-1:#E45CA1; --pink-2:#EA85B8; --pink-3:#F1ADD0; --pink-4:#F8D6E7;
  --black-1:#323232; --black-2:#646464; --black-3:#969696; --black-4:#C8C8C8;
  --lavender-1:#F4EBF8; --lavender-2:#F7F0FA; --lavender-3:#F9F5FB; --lavender-4:#FCFAFD;

  /* Type: Hubot Sans, Dubai for Arabic. Scale 14 23 38 62 100 (1.618). */
  --font-sans:"Hubot Sans","Dubai",system-ui,sans-serif; --font-arabic:"Dubai","Hubot Sans",system-ui,sans-serif;
  --display:var(--font-sans); --body:var(--font-sans);
  --size-1:100px; --size-2:62px; --size-3:38px; --size-4:23px; --size-5:14px;

  /* Spacing: the type scale's steps. */
  --space-1:5px; --space-2:9px; --space-3:14px; --space-4:23px; --space-5:38px; --space-6:62px; --space-7:100px;

  /* Radius: sm for buttons, tags, rows, tiles; lg for cards and list containers; full for circles. */
  --radius-sm:4px; --radius-lg:16px; --radius-full:9999px; --r:var(--radius-lg);

  /* Motion (unchanged from the OS). */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);

  /* Layout sizes (unchanged). */
  --nav:232px; --rail:348px; --chat:clamp(340px,27vw,420px);

  /* The office scene follows the theme (night in dark, daylight in light). The Knowledge Graph stays dark. */
  --stage:var(--black); --stage-panel:color-mix(in srgb,var(--black) 78%,var(--purple-1)); --stage-line:color-mix(in srgb,var(--white) 18%,transparent);
  --stage-text:var(--white); --stage-muted:var(--white-4); --stage-dim:var(--black-3); --stage-soft:var(--lavender);
  /* The office art (scene.js): a night skyline in dark. */
  --of-sky-1:#04050D; --of-sky-2:#110D28; --of-sky-3:#2B1B47; --of-city:#0B0D1D; --of-win-a:var(--soft-yellow); --of-win-b:var(--lavender);
  --of-tower:#0D0F21; --of-beacon:var(--soft-yellow); --of-arch:#1A1336; --of-ceil:#0A0A10; --of-lamp:var(--yellow-3); --of-sill:#14141E;
  --of-floor-1:#0C0B14; --of-floor-2:#040407; --of-pot:#14141C; --of-pot-line:#2A2A36; --of-leaf:#0F3A22; --of-leaf-line:#1F6B3E;
  --of-ring-1:var(--soft-yellow); --of-ring-band:#1B1B28; --of-ring-2:#2A2A3C; --of-plat-base:#05050A; --of-plat:#0B0B14;
  --of-chair:#0D0D15; --of-chair-line:#2A2A3C; --of-sel:var(--white);
  --of-table:#120C1F; --of-table-edge:#07050C; --of-table-rim:var(--violet); --of-nerve:var(--yellow);   /* the long table on the phone; its nerve lines */
}

/* Dark: the system's Dark theme. Black ground, white ink, yellow accent, purple-1 as the alternate surface. */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --surface:var(--black); --surface-alt:var(--purple-1); --ink:var(--white); --ink-muted:var(--white-4);
  --accent:var(--yellow); --on-accent:var(--purple); --highlight:var(--orchid); --border:var(--white); --focus:var(--yellow);
  --line:var(--black-1); --line-2:color-mix(in srgb,var(--black-1) 55%,var(--black-2));

  --bg:var(--black); --panel:color-mix(in srgb,var(--black) 84%,var(--purple-1)); --panel-2:color-mix(in srgb,var(--black) 64%,var(--purple-1));
  --well:var(--black); --you:var(--surface-alt);
  --text:var(--ink); --muted:var(--ink-muted); --dim:var(--black-3); --sel:var(--focus);
  /* Links and selection in violet: in the OS yellow means one thing, a decision that waits for Tarek. */
  --link:var(--violet);
  /* States from the brand: up and done in violet, down and failed in pink, waiting in yellow, working in orchid. */
  --ok:var(--violet); --bad:var(--pink-1); --warn:var(--yellow); --attn:var(--yellow); --busy:var(--orchid);
  --toast-bg:var(--white); --toast-fg:var(--black);
  --holo:241,230,246;
}

/* Light: the system's Light theme. White ground, black ink, purple accent, lavender as the alternate surface. */
:root[data-theme="light"]{
  color-scheme:light;
  --surface:var(--white); --surface-alt:var(--lavender); --ink:var(--black); --ink-muted:var(--black-2);
  --accent:var(--purple); --on-accent:var(--white); --highlight:var(--yellow); --border:var(--purple); --focus:var(--purple);
  --line:var(--white-2); --line-2:var(--white-4);

  --bg:var(--lavender-4); --panel:var(--white); --panel-2:var(--lavender-2);
  --well:var(--lavender-3); --you:var(--surface-alt);
  --text:var(--ink); --muted:var(--ink-muted); --dim:color-mix(in srgb,var(--black-2) 70%,var(--black-3)); --link:var(--accent); --sel:var(--focus);
  --ok:var(--purple); --bad:color-mix(in srgb,var(--pink) 82%,var(--black)); --warn:var(--orchid-1); --attn:var(--orchid-1); --busy:var(--orchid-2);
  --toast-bg:var(--black); --toast-fg:var(--white);
  --holo:94,67,170;
  /* The office in daylight: the same room, a lavender sky, white floor, purple rings. */
  --stage:var(--lavender-2); --stage-panel:var(--white); --stage-line:color-mix(in srgb,var(--black) 12%,transparent);
  --stage-text:var(--black); --stage-muted:var(--black-2); --stage-dim:var(--black-3); --stage-soft:var(--deep-purple);
  --of-sky-1:#D9CDEE; --of-sky-2:#EBE2F6; --of-sky-3:var(--lavender-2); --of-city:#CFC4E4; --of-win-a:var(--white); --of-win-b:var(--violet);
  --of-tower:#BDB0DA; --of-beacon:var(--purple); --of-arch:#EADFF5; --of-ceil:var(--lavender-1); --of-lamp:var(--purple-4); --of-sill:#E2D7EE;
  --of-floor-1:#EFE6F6; --of-floor-2:var(--lavender-4); --of-pot:var(--white); --of-pot-line:var(--white-3); --of-leaf:#5A9E70; --of-leaf-line:#357A4E;
  --of-ring-1:var(--purple); --of-ring-band:#EDE4F5; --of-ring-2:#D6CAE7; --of-plat-base:#E2D8EE; --of-plat:var(--white);
  --of-chair:var(--white); --of-chair-line:#D3C8E3; --of-sel:var(--black-2);
  --of-table:var(--white); --of-table-edge:#E2D8EE; --of-table-rim:var(--purple); --of-nerve:var(--purple);
}

/* Browser surfaces carry the brand too. */
::selection{background:var(--purple);color:var(--white)}
html{scrollbar-color:var(--line-2) transparent;caret-color:var(--accent);accent-color:var(--purple)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:lang(ar),[dir="rtl"]{font-family:var(--font-arabic)}