/* dalai-tokens.css
 *
 * Rebrands the upstream new-api console WITHOUT forking it.
 *
 * HOW THIS WORKS
 *   The console is Tailwind 4 + shadcn-style design tokens: every colour, radius
 *   and font in it resolves through CSS custom properties. 330 of them are
 *   defined in the shipped stylesheet. Redefining the couple of dozen that
 *   matter restyles the entire product. Caddy injects a link to this file into
 *   the console's HTML at the edge (see the Caddyfile), so nothing is forked,
 *   nothing is rebuilt, and an upstream upgrade cannot undo it.
 *
 * WHY TOKENS AND NOT CSS SELECTORS
 *   Token names like --primary are stable design vocabulary. Class names in that
 *   bundle are minified and regenerated on every upstream build, and upstream
 *   ships roughly nine releases a month. Anything written against a class name
 *   is broken by the next release; anything written against a token is not.
 *
 * RULES FOR EDITING THIS FILE
 *   1. Tokens only. No layout, no positioning, no per-component selectors. The
 *      moment this file targets a class name it becomes upstream's problem.
 *   2. Every token gets a light AND a dark value. The console has a theme
 *      toggle, and half a palette looks broken rather than half-finished.
 *   3. Selectors carry an extra attribute so they outrank the app's own
 *      [data-theme-preset=...] blocks, which would otherwise tie and be decided
 *      by source order.
 *   4. No @import and no remote font. Google Fonts is not dependably reachable
 *      from Iran, and a blocked stylesheet is a blank page. A Persian face gets
 *      self-hosted from this same directory when we do Persian properly.
 *   5. Every declaration carries !important, deliberately. This is an override
 *      sheet injected at the edge against a vendor stylesheet we do not control,
 *      which is the one case where !important is the correct tool rather than a
 *      smell. Upstream declares each token at least twice, once as hex and again
 *      inside @supports (color: lab(...)), and ships around nine releases a
 *      month. Relying on source order would mean this file quietly stops working
 *      the first time they reorder a stylesheet link. Keep it.
 */

/* ---------------------------------------------------------------------------
 * Persian typography: Vazirmatn, self-hosted, Persian glyphs only.
 *
 * WHY THE "NL" (Non-Latin) BUILD
 *   Verified: 0 Latin letters, 0 ASCII digits, all Persian codepoints including
 *   ZWNJ (U+200C). It physically cannot affect English text or numbers, so the
 *   Latin UI keeps Inter and only Persian runs change. 46 KB for every weight,
 *   against 50 KB for a single static weight of the full family.
 *
 * WHY unicode-range AS WELL
 *   Belt and braces, and it is what makes this work with no lang attribute: the
 *   app never sets lang="fa", so we cannot select on it. unicode-range tells the
 *   browser to reach for this face ONLY for these codepoints, and to not even
 *   download it on a page with no Persian text.
 *
 * WHY NOT THE FARSI-DIGITS BUILD
 *   It would render 1,657,950 as ۱٬۶۵۷٬۹۵۰. Prices sit next to Latin model names
 *   and USD figures, and mixed numeral systems in a price list are a support
 *   ticket. Latin digits stay.
 *
 * WHY SELF-HOSTED
 *   Google Fonts is not dependably reachable from Iran, and a blocked stylesheet
 *   is a blank page. jsdelivr times out from Front-1 too; this file was fetched
 *   from the npm registry and committed to the project.
 *
 * SIL Open Font License. Licence text is beside the font in www/fonts/.
 *
 * THE PART THAT MAKES IT ACTUALLY WORK
 *   Overriding --font-body alone is NOT enough. The bundle contains 14
 *   `font-family:` declarations that name families directly ("Public Sans",
 *   "Public Sans Variable", the -apple-system stack) and never read a token, so
 *   a token override cannot reach them. Chrome duly loaded our stylesheet and
 *   never once requested the font.
 *
 *   So we EXTEND the existing families instead of replacing them: an extra
 *   @font-face under each family name upstream already uses, carrying our file
 *   and an Arabic unicode-range. The browser merges faces for one family and
 *   picks per codepoint, so "Public Sans" keeps rendering Latin from Public Sans
 *   and now renders Persian from Vazirmatn. Nothing has to know it happened.
 */

/* The Arabic coverage, declared once and reused for each family name below.
   Arabic, Arabic Supplement, Arabic Extended-A, Presentation Forms A and B,
   plus ZWNJ and the direction marks. */
@font-face {
  font-family: "Vazirmatn NL";
  src: url("/fonts/Vazirmatn-NL-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F,
                 U+FB50-FDFF, U+FE70-FEFF;
}

/* Same file, registered under the families the bundle names directly. This is
   what catches the 14 hardcoded declarations. */
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/Vazirmatn-NL-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F,
                 U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Public Sans Variable";
  src: url("/fonts/Vazirmatn-NL-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F,
                 U+FB50-FDFF, U+FE70-FEFF;
}

:root,
:root[data-theme-preset] {
  /* body{font-family:var(--font-body)} is the single place the page font is
     decided. Vazirmatn goes FIRST so Persian codepoints resolve to it, then the
     original stack, so every Latin glyph still comes from Public Sans exactly as
     before. !important because upstream redefines --font-body four times,
     including presets that swap it to a serif. */
  /* The fallback inside var() is load-bearing, not decoration. This stylesheet
     is ALSO linked by our own standalone pages (/guide), where the app's
     stylesheet does not exist and --font-sans is therefore undefined. Without a
     fallback the whole declaration is invalid and the page silently loses both
     Vazirmatn and the body font. That is exactly how /guide shipped without the
     Persian font while every check said the font was deployed. */
  --font-body: "Vazirmatn NL", var(--font-sans, "Public Sans", system-ui, sans-serif) !important;
  /* Monospace too: model names and prices render in the mono stack, and Persian
     inside a mono run would otherwise fall back to whatever the OS picks. */
  --font-mono: "Vazirmatn NL", ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace !important;

  /* Brand. Violet rather than the stock #3ea4ec blue, which is the single
     change that stops the console reading as someone else's product. */
  --primary: #5b4bd6 !important;
  --primary-foreground: #ffffff !important;
  --ring: #5b4bd6 !important;

  /* Surfaces: very slightly warm, so white areas do not look clinical next to
     the violet. */
  --background: #fbfbfd !important;
  --foreground: #16151f !important;
  --card: #ffffff !important;
  --card-foreground: #16151f !important;
  --popover: #ffffff !important;
  --popover-foreground: #16151f !important;

  --secondary: #eeedf6 !important;
  --secondary-foreground: #3b3564 !important;
  --muted: #f4f4f8 !important;
  --muted-foreground: #64627a !important;
  --accent: #ecebf9 !important;
  --accent-foreground: #2e2857 !important;

  --border: #e5e4ee !important;
  --input: #e5e4ee !important;

  /* Semantic. Kept close to convention: money and quota live in this UI, and a
     clever green is a support ticket. */
  --success: #0f8f63 !important;
  --success-foreground: #ffffff !important;
  --warning: #b8791b !important;
  --warning-foreground: #1a1509 !important;
  --destructive: #d33345 !important;
  --destructive-foreground: #ffffff !important;
  --info: #2f7de1 !important;
  --info-foreground: #ffffff !important;
  --neutral: #8b8aa0 !important;
  --neutral-foreground: #16151f !important;

  /* Charts: one hue family ordered by lightness, so a five-series chart reads
     as data rather than as a rainbow. */
  --chart-1: #5b4bd6 !important;
  --chart-2: #8b7cf0 !important;
  --chart-3: #2f9fd4 !important;
  --chart-4: #0f8f63 !important;
  --chart-5: #b8791b !important;

  /* 1rem reads consumer-app. This is a console people work in. */
  --radius: 0.625rem !important;
}

.dark,
.dark[data-theme-preset] {
  /* Lifted and desaturated: the light primary is unreadable on a dark ground. */
  --primary: #8f80f5 !important;
  --primary-foreground: #14101f !important;
  --ring: #8f80f5 !important;

  --background: #121119 !important;
  --foreground: #eceaf4 !important;
  --card: #191823 !important;
  --card-foreground: #eceaf4 !important;
  --popover: #191823 !important;
  --popover-foreground: #eceaf4 !important;

  --secondary: #23212f !important;
  --secondary-foreground: #d7d3ea !important;
  --muted: #1d1c27 !important;
  --muted-foreground: #9c99b0 !important;
  --accent: #262338 !important;
  --accent-foreground: #e4e1f2 !important;

  --border: #2a2837 !important;
  --input: #2a2837 !important;

  --success: #35b587 !important;
  --success-foreground: #08150f !important;
  --warning: #d99b3a !important;
  --warning-foreground: #191204 !important;
  --destructive: #e85a6a !important;
  --destructive-foreground: #1a0a0c !important;
  --info: #5aa9ee !important;
  --info-foreground: #06121d !important;
  --neutral: #7d7b91 !important;
  --neutral-foreground: #eceaf4 !important;

  --chart-1: #8f80f5 !important;
  --chart-2: #b3a8fa !important;
  --chart-3: #5aa9ee !important;
  --chart-4: #35b587 !important;
  --chart-5: #d99b3a !important;
}