/*
 * Buffalo147 AI — design tokens
 *
 * Every colour, radius and duration used anywhere in the product is declared
 * here. No template may invent its own hex value; if something needs a new
 * shade, it gets a token. That rule is what keeps the homepage, the chat, the
 * dashboard and the admin panel feeling like one product instead of five.
 *
 * Source of truth: 01-BRAND-IDENTITY/brand-guidelines.txt
 */

:root {
  /* =====================================================================
   * The black foundation.
   *
   * Pure black with layers close enough together that panels are visible
   * by their border rather than by being grey. The old names below are
   * kept and now point at these, so every rule that reads them moves
   * with the design instead of being left behind.
   * ================================================================== */
  --bg-main:        #151515;
  --bg-deep:        #101010;
  --surface-1:      #181818;
  --surface-2:      #1B1B1B;
  --surface-3:      #1E1E1E;
  --surface-4:      #20201F;
  --surface-hover:  #262626;

  /*
   * Read from the operator's own reference, not chosen: #FE4C02 across
   * the new-chat button and the send button. A touch redder than the
   * #fe4c02 it replaces, and the two are close enough that having both
   * on one page reads as a mistake rather than a choice.
   */
  --orange-500:     #A94F31;
  --orange-400:     #B76B52;
  --orange-600:     #8B4128;

  --text-primary:   #f5f5f5;
  --text-secondary: #c2c2c2;
  /*
   * Lifted for the darker page.
   *
   * These were chosen against #111. On true black the same greys sit at
   * about 2.2:1 against what is behind them, which is below what a
   * caption needs to be read rather than merely seen.
   */
  /*
   * Lifted again, for Persian on black.
   *
   * Latin can be read at 4.5:1 in these greys; Persian is cursive and
   * its letters are told apart by marks above and below the line, so it
   * loses more of itself at the same contrast. These now clear 4.5:1
   * against the panels they actually sit on.
   */
  --text-muted:     #a6a6a6;
  --text-disabled:  #949494;

  --border-default: rgba(255,255,255,.075);
  --border-strong:  rgba(255,255,255,.11);
  --orange-border:      rgba(169,79,49,.55);
  --orange-border-soft: rgba(169,79,49,.22);

  /* Dark smoked glass: noticeable, never a window. */
  /*
   * Glass that stays black over a warm page.
   *
   * saturate() amplifies whatever the blur pulls through, and on a page
   * with copper in it that turned every panel brown. The blur alone is
   * what makes it read as glass.
   */
  --glass:      rgba(10,10,10,.95);
  --glass-blur: blur(18px);

  /*
   * One transition for the whole site.
   *
   * Hovers change brightness or border by 5–10% and no more — that
   * restraint is most of what makes an interface feel expensive.
   */
  --bf-ease-all:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;

  /* ---- Surfaces ------------------------------------------------------ */
  --bf-bg:            var(--bg-main);
  --bf-surface:       var(--surface-2);
  --bf-surface-2:     var(--surface-3);
  --bf-surface-3:     var(--surface-4);
  --bf-line:          var(--border-default);
  --bf-line-strong:   var(--border-strong);

  /* Dark glass: used for cards, panels and the model selector. */
  --bf-glass:         rgba(255, 255, 255, 0.035);
  --bf-glass-strong:  rgba(255, 255, 255, 0.06);
  --bf-glass-border:  rgba(255, 255, 255, 0.08);
  --bf-blur:          blur(18px);

  /* ---- Brand --------------------------------------------------------- */
  /*
   * The accent, and a darker one for anything carrying white text.
   *
   * White on #FE4C02 measures 2.4:1 — below the 4.5 needed for ordinary
   * text, which means it is hard work for anyone with weaker sight or
   * looking at a phone outdoors. The bright orange stays for borders,
   * icons and labels on dark surfaces, where it is the foreground and
   * reads perfectly.
   *
   * Where white sits on top of the orange, the orange goes darker:
   * #C25A12 measures 4.4:1, which is the same colour family and legible.
   */
  --bf-accent:        var(--orange-500);
  --bf-accent-hover:  var(--orange-400);
  --bf-accent-press:  var(--orange-600);

  /*
   * Solid surfaces carrying white text.
   *
   * You chose the brighter orange with white on it, having seen all three
   * side by side. Recording the trade-off rather than re-litigating it:
   * white on #FE4C02 measures 2.4:1 against the 4.5 an accessibility
   * standard asks for, which mainly costs legibility on small buttons in
   * bright light.
   *
   * If a small label ever looks washed out, #C25A12 is the same family at
   * 4.4:1 — change these three lines and nothing else.
   */
  /*
   * The credit mark, everywhere it is drawn.
   *
   * The little bolt appears on the generate button, in the model sheet, in
   * the balance chip and in the rail, and each place had reached for a
   * different step of the ramp. One name means they agree, and means a
   * change lands in all of them at once.
   */
  --bf-credit-mark:        #C56240;

  --bf-accent-solid:       var(--orange-500);
  --bf-accent-solid-hover: var(--orange-400);
  --bf-accent-solid-press: var(--orange-600);
  --bf-on-accent:          #FFFFFF;
  --bf-accent-soft:   rgba(169, 79, 49, .10);
  --bf-accent-line:   var(--orange-border-soft);
  /*
   * Glow, at a tenth of its old strength.
   *
   * It used to ring anything selected in bright orange, which made the
   * whole interface shout. Depth now comes from black shadow; orange is
   * left to say which one thing is chosen.
   */
  --bf-accent-glow:   0 0 0 1px rgba(169, 79, 49, .06), 0 8px 24px rgba(169, 79, 49, .10);

  /* ---- Text ---------------------------------------------------------- */
  --bf-text:          var(--text-primary);
  --bf-text-muted:    var(--text-secondary);
  --bf-text-dim:      var(--text-muted);
  --bf-text-faint:    var(--text-disabled);

  /* ---- Status -------------------------------------------------------- */
  --bf-success:       #34D07F;
  --bf-warning:       #FFB020;
  --bf-danger:        #FF5252;
  --bf-info:          #4DA3FF;
  --bf-success-soft:  rgba(52, 208, 127, 0.12);
  --bf-warning-soft:  rgba(255, 176, 32, 0.12);
  --bf-danger-soft:   rgba(255, 82, 82, 0.12);
  --bf-info-soft:     rgba(77, 163, 255, 0.12);

  /* ---- Sage ----------------------------------------------------------
   *
   * A second green, and not a status colour.
   *
   * `--bf-success` is a signal: it means something went right, and it is
   * bright enough to say so from the corner of the eye. This one is a
   * MATERIAL — the green of a figure you are meant to read and consider,
   * not react to. It is muted where the other is vivid, which is why it
   * sits beside the warm accent without either of them shouting.
   *
   * The two are not interchangeable and neither replaces the other: a
   * saved-successfully tick in this colour would be too quiet to notice,
   * and a price in the bright one would read as an alert.
   */
  --bf-sage:          #74AA9C;
  --bf-sage-soft:     rgba(116, 170, 156, 0.12);
  --bf-sage-line:     rgba(116, 170, 156, 0.26);

  /* ---- Typography ---------------------------------------------------- */
  /* Peyda first when it has been licensed and installed; Vazirmatn
     otherwise. Nothing breaks if the files are absent — the browser
     simply moves to the next name. */
  /*
   * Stacking order.
   *
   * These were bare numbers scattered across two files — 5, 6, 60, 200,
   * 999, 1000 — each chosen where it was needed. The model menu at 60
   * opened underneath the mobile sidebar at 1000, so on a phone it looked
   * like it never opened.
   *
   * Named here, the order is a decision rather than an accident, and the
   * gaps leave room to put something between two without renumbering
   * everything above it.
   */
  /* Behind the content of its own parent — a decorative layer. */
  --bf-z-behind:     0;
  --bf-z-base:       1;
  /* Marks drawn over a scrolling row: its fades, and the arrows on top. */
  --bf-z-edge:       2;
  --bf-z-edge-btn:   3;
  --bf-z-sticky:    10;
  --bf-z-overlay:   20;
  --bf-z-menu:     100;
  --bf-z-backdrop: 190;
  --bf-z-rail:     200;
  --bf-z-modal:    300;
  --bf-z-toast:    400;

  /*
   * Named because they were already in use.
   *
   * Both were only ever fallbacks inside var() — `var(--bf-ok, #34D07F)`
   * repeated in four places, and a stream width in one. Repeated values
   * agree until someone changes one of them, which is the fault that has
   * cost the most here.
   */
  --bf-ok:           #34D07F;
  --bf-stream-w:     760px;

  --bf-font-display: 'Peyda', 'Vazirmatn', system-ui, -apple-system, sans-serif;
  --bf-font: 'Vazirmatn', 'InterBF', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bf-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;

  /*
   * THE FLOOR, AND WHY IT MOVES ON A PHONE.
   *
   * Thirty-six places wrote `11.5px` as a literal — a size that reads
   * perfectly well on a desk and is half a pixel under what Persian needs
   * on a phone, where the dots of «ی» and «ب» and the descenders close up
   * at arm's length. Measured on the ready-made style shelf at 360px:
   * three lines below the floor.
   *
   * A literal cannot be raised in one place. A token can, and this one
   * keeps exactly the value it had everywhere it is used today — it only
   * stops shrinking below twelve where the screen is small.
   */
  --bf-size-2xs:  11.5px;
  --bf-size-xs:   12px;
  --bf-size-sm:   13px;
  --bf-size-base: 14px;
  --bf-size-md:   15px;
  --bf-size-lg:   17px;
  --bf-size-xl:   20px;
  --bf-size-2xl:  26px;
  --bf-size-3xl:  34px;
  --bf-size-4xl:  44px;

  --bf-leading-tight: 1.35;
  --bf-leading:       1.8;

  /* ---- Radius -------------------------------------------------------- */
  /* 24px is the brand radius for cards and panels. Smaller controls step
     down proportionally so nothing looks like a different design language. */
  --bf-radius:      24px;
  --bf-radius-md:   16px;
  --bf-radius-sm:   12px;
  --bf-radius-xs:   8px;
  --bf-radius-pill: 999px;

  /* ---- Spacing ------------------------------------------------------- */
  --bf-space-1:  4px;
  --bf-space-2:  8px;
  --bf-space-3:  12px;
  --bf-space-4:  16px;
  --bf-space-5:  20px;
  --bf-space-6:  24px;
  --bf-space-8:  32px;
  --bf-space-10: 40px;
  --bf-space-12: 48px;
  --bf-space-16: 64px;

  /* ---- Elevation ----------------------------------------------------- */
  --bf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --bf-shadow:    0 8px 28px rgba(0, 0, 0, 0.45);
  --bf-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* ---- Motion -------------------------------------------------------- */
  /* Brand rule: smooth and professional, never busy. */
  --bf-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --bf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bf-fast:     140ms;
  --bf-normal:   240ms;
  --bf-slow:     420ms;

  /* ---- Layout -------------------------------------------------------- */
  --bf-container: 1200px;
  --bf-header-h:  64px;
  /*
   * Measured from the reference: 378px on a 1536px shot is 354 at our
   * 1440. The rail is a floating panel now, so this track carries its
   * margins as well as its width.
   */
  /* 354 for the panel, plus the 15px gap the track has to hold. */
  --bf-sidebar-w: 369px;

  --bf-z-header: 100;
  --bf-z-panel:  400;
  --bf-z-modal:  600;
  --bf-z-toast:  800;
}

/* Respect the operating-system preference. Animations here are decorative,
   so switching them off must never hide information. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bf-fast: 1ms;
    --bf-normal: 1ms;
    --bf-slow: 1ms;
  }
}

/*
 * On a phone, nothing in the interface drops below twelve pixels.
 *
 * 640 is the breakpoint the rest of these stylesheets already turn on —
 * twenty-one rules use it — so the floor moves with everything else
 * rather than introducing a width of its own.
 */
@media (max-width: 640px) {
  :root { --bf-size-2xs: 12px; }
}