/* ---------------------------------------------------------------------------
 * Deployment branding.
 *
 * This is the only file you need to edit to re-brand the portal, together with
 * logo.png next to it. It is plain CSS served as-is, so it can be replaced in a
 * running container or mounted over — no rebuild, no source checkout.
 *
 * It is linked from index.html and uses a `:root:root` selector, which outranks
 * the application's own `:root` no matter which stylesheet loads first. Every
 * value below is a default the application already defines; uncomment a line to
 * override it, delete a line to go back to the default.
 *
 * Colours are written in oklch(lightness chroma hue) — lightness 0–1, chroma
 * 0 (grey) to ~0.37 (vivid), hue 0–360 degrees. Any CSS colour works, so plain
 * hex such as #1853c6 is fine if that is what your brand guide gives you.
 * ------------------------------------------------------------------------ */

:root:root {
  /* -------------------------------------------------------------------------
   * 1. The one-line re-brand
   *
   * Almost everything with colour in it derives from --brand: the header, the
   * primary buttons, focus rings, the sign-in background, the "in progress"
   * status, the language pills. Set this one value and the portal follows.
   * ---------------------------------------------------------------------- */

  /* --brand: oklch(0.55 0.21 262); */ /* default — indigo */
  /* --brand: oklch(0.52 0.17 155); */ /* forest green */
  /* --brand: oklch(0.55 0.20 25);  */ /* signal red */
  /* --brand: #7a1fa2;              */ /* or straight from a brand guide */

  /* Text and icons drawn on top of --brand. Near-white suits most brand
   * colours; switch to a dark value if your brand colour is pale (yellow,
   * light green), or the header text will not be readable. */
  /* --brand-foreground: oklch(0.985 0 0); */ /* default — near-white */
  /* --brand-foreground: oklch(0.20 0 0);  */ /* for a pale brand colour */

  /* The page background behind cards. A near-white tinted towards the brand
   * colour reads as deliberate; pure white (oklch(1 0 0)) reads as flat. */
  /* --surface: oklch(0.9772 0.0068 248); */

  /* Pale brand tints — the language pills, subtle highlights. These follow
   * --brand's hue on their own, so you only set them to break that link. */
  /* --brand-subtle: oklch(from var(--brand) 0.955 0.04 h); */
  /* --brand-subtle-foreground: oklch(from var(--brand) 0.40 0.16 h); */

  /* -------------------------------------------------------------------------
   * 2. Name and logo
   *
   * --app-title is the portal's name: the browser tab, the header next to the
   * logo, the sign-in page. Unset, it falls back to the <title> in index.html.
   *
   * The simplest route is to overwrite logo.png in this folder and change
   * nothing here. Point --logo-url elsewhere if you would rather keep several
   * logos side by side, or serve an SVG.
   *
   * The logo is drawn as a background image, so it scales to the box rather
   * than the box to it. Give --logo-width enough room for a wide wordmark.
   * ---------------------------------------------------------------------- */

  /* --app-title: "Acme Translations"; */

  /* --logo-url: url("/branding/logo.png"); */
  /* --logo-url: url("/branding/acme-wordmark.svg"); */
  /* --logo-width: 9rem;        */ /* sign-in page */
  /* --logo-header-width: 6rem; */ /* application header */

  /* The header and sign-in page place the logo on the brand colour, so by
   * default it is knocked out to a flat silhouette. If your logo is already
   * light, or you want its real colours there, clear the filter. */
  /* --logo-on-brand-filter: brightness(0) invert(1); */ /* default — white silhouette */
  /* --logo-on-brand-filter: none;                    */ /* keep the original artwork */

  /* -------------------------------------------------------------------------
   * 3. Sign-in background
   *
   * The sign-in page is a gradient mixed from --brand, so it re-brands itself.
   * Override only to break that link — for example a neutral sign-in page.
   * ---------------------------------------------------------------------- */

  /* --brand-gradient-angle: 160deg; */
  /* --brand-gradient-start: color-mix(in oklab, var(--brand) 88%, black); */
  /* --brand-gradient-end:   color-mix(in oklab, var(--brand) 72%, black); */

  /* A darker, flatter sign-in page that ignores the brand colour: */
  /* --brand-gradient-start: oklch(0.25 0.02 260); */
  /* --brand-gradient-end:   oklch(0.15 0.02 260); */

  /* -------------------------------------------------------------------------
   * 4. Shape and type
   *
   * --radius drives every rounded corner in the portal; the individual sizes
   * are calculated from it. 0 gives a square, technical look, 1.5rem a soft
   * consumer one.
   * ---------------------------------------------------------------------- */

  /* --radius: 0.625rem; */ /* default */
  /* --radius: 0;         */ /* square */
  /* --radius: 1.25rem;   */ /* pill-soft */

  /* Fonts. --font-heading defaults to --font-body, so setting the body font
   * alone changes everything. A web font has to be loaded before it can be
   * named here — put an @import at the very top of this file, above the
   * :root:root block, or a <link> in index.html:
   *
   *   @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
   */

  /* --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; */
  /* --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif; */
  /* --font-heading: "Playfair Display", Georgia, serif; */

  /* -------------------------------------------------------------------------
   * 5. Order status colours
   *
   * The status badges and the progress stepper. These carry meaning, so keep
   * them distinguishable — and keep "cancelled" and "rejected" visibly
   * different from a healthy status. --status-inprogress follows --brand
   * unless you set it.
   * ---------------------------------------------------------------------- */

  /* --status-pending:    oklch(0.62 0.14 75);  */ /* amber */
  /* --status-inprogress: var(--brand);         */
  /* --status-completed:  oklch(0.52 0.14 150); */ /* green */
  /* --status-cancelled:  var(--muted-foreground); */
  /* --status-rejected:   var(--destructive);   */

  /* -------------------------------------------------------------------------
   * 6. File type colours
   *
   * The square badges next to uploaded and delivered files. Purely decorative
   * — the extension is written on the badge — so these are safe to flatten to
   * a single colour if you want a quieter upload list.
   * ---------------------------------------------------------------------- */

  /* --file-document:    oklch(0.52 0.19 255); */ /* doc, docx */
  /* --file-spreadsheet: oklch(0.50 0.15 150); */ /* xls, xlsx */
  /* --file-markup:      oklch(0.54 0.13 230); */ /* html, xml */
  /* --file-bilingual:   oklch(0.50 0.20 300); */ /* xlf, xliff, sdlxliff, … */
  /* --file-terminology: oklch(0.52 0.11 190); */ /* tbx, tmx */
  /* --file-pdf:         oklch(0.53 0.20 25);  */
  /* --file-text:        oklch(0.52 0.12 100); */ /* txt */
  /* --file-other:       var(--muted-foreground); */

  /* -------------------------------------------------------------------------
   * 7. Everything else
   *
   * The standard shadcn surface tokens. You rarely need these — --brand and
   * --surface cover most re-brands — but they are here for a deployment that
   * wants full control. See src/index.css for the complete list.
   * ---------------------------------------------------------------------- */

  /* --background: oklch(1 0 0);             */
  /* --foreground: oklch(0.145 0 0);         */
  /* --card:       oklch(1 0 0);             */
  /* --muted-foreground: oklch(0.556 0 0);   */
  /* --border:     oklch(0.922 0 0);         */
  /* --destructive: oklch(0.577 0.245 27.325); */
}