/*
  tokens.css: the ONE place a colour, shadow or radius value may be written (CLAUDE.md §12).

  Every other stylesheet uses var(--bfau-*) only; the StyleRules architecture test fails the build
  on a colour literal anywhere else.

  THE VALUES BELOW ARE THE THEME CATALOGUE'S DEFAULTS (Bfau.Platform.Theming.ThemeCatalog). The
  admin Appearance screen changes them without a deploy: /theme/<site>.css is generated from the
  saved presets and changes and loads after this file. A catalogue default and its line here must
  be equal; ThemeCatalogTests fails the build when they drift.

  A colour the kit also needs as "r, g, b" (for its translucent tints) is written twice: as the
  colour and as -rgb. Values that follow others (an alias, a tint) are DERIVED at the bottom of each
  block, so they keep following whatever an admin picks.
*/
:root {

  /* Brand */
  --bfau-primary: #1b6ec2;
  --bfau-primary-rgb: 27, 110, 194;
  --bfau-primary-emphasis: #155a9f;
  --bfau-primary-subtle: #dde9f6;
  --bfau-on-primary: #ffffff;
  /* Brand colour as TEXT or an icon: the brand colour mixed with the text colour just far enough to read on the card, the brand tint and the page. DERIVED by ThemeBuilder (ThemeResolution.cs), which rewrites it in the generated sheet for any other brand colour; ThemeCatalogTests keeps this line equal to what it computes for the defaults. */
  --bfau-primary-text: color-mix(in srgb, var(--bfau-primary) 75%, var(--bfau-text));
  --bfau-link: #006ab6;
  --bfau-link-rgb: 0, 106, 182;
  --bfau-secondary: #7b70ef;
  --bfau-secondary-rgb: 123, 112, 239;

  /* Status */
  --bfau-success: #02bc9c;
  --bfau-success-rgb: 2, 188, 156;
  --bfau-warning: #f9bf59;
  --bfau-warning-rgb: 249, 191, 89;
  --bfau-danger: #f7577e;
  --bfau-danger-rgb: 247, 87, 126;
  --bfau-info: #5bc3e1;
  --bfau-info-rgb: 91, 195, 225;

  /* Surfaces and text */
  --bfau-body-bg: #f6f7fb;
  --bfau-body-bg-rgb: 246, 247, 251;
  --bfau-surface: #ffffff;
  --bfau-surface-rgb: 255, 255, 255;
  --bfau-border: #e7e9eb;
  --bfau-text: #4c4c5c;
  --bfau-text-rgb: 76, 76, 92;
  --bfau-text-muted: #646e7d;
  --bfau-text-muted-rgb: 100, 110, 125;

  /* The public website's headings and dark bands. */
  --bfau-heading: #2f2c52;
  --bfau-dark-section: #302c51;
  --bfau-on-photo: #ffffff;

  /* The WhatsApp buttons of the public website (the floating button, the menu bar's, the footer's). */
  --bfau-whatsapp: #11806a;
  --bfau-on-whatsapp: #ffffff;

  /* A dark scrim over a photo (a page banner's cover), light enough at the top that the photo still
     reads as a photo, dark enough at the bottom that white heading text stays legible over any face
     or busy background. */
  --bfau-photo-scrim-top: rgb(0 0 0 / 55%);
  --bfau-photo-scrim-bottom: rgb(0 0 0 / 70%);

  /* Typography: per-script aliases from fonts.css (the Appearance screen picks them). */
  --bfau-font-latin: "bfau-latin-ibm-plex-sans-arabic";
  --bfau-font-arabic: "bfau-arabic-ibm-plex-sans-arabic";
  --bfau-heading-font-latin: "bfau-latin-ibm-plex-sans-arabic";
  --bfau-heading-font-arabic: "bfau-arabic-ibm-plex-sans-arabic";

  /* Shape */
  --bfau-radius: 0.3rem;
  --bfau-radius-lg: 0.4rem;
  --bfau-shadow: 0 1px 4px 0 rgba(130, 143, 163, 0.15);

  /* Sign-in page */
  --bfau-auth-panel-from: #0f3d6e;
  --bfau-auth-panel-to: #1b6ec2;
  --bfau-auth-panel-text: #ffffff;

  /* Sign-in, Photo layout: the crest's gold, its near-black, and white lettering. Not catalogue
     tokens: the layout is one fixed look over photographs, the same in both modes. */
  --bfau-photo-gold: #c9a24b;
  --bfau-photo-gold-deep: #9c7a2a;
  --bfau-photo-ink: #14110a;
  --bfau-photo-text: #ffffff;

  /* Derived: see the block at the end of this file. */
}

/* Derived tokens follow the values above, whatever an admin picks. The Appearance preview box
   declares its own values, so it re-derives them too. */
:root,
.bfau-theme-preview {
  /* Text takes Latin characters from the Latin font and Arabic ones from the Arabic font. */
  --bfau-font-sans: var(--bfau-font-latin), var(--bfau-font-arabic), "Segoe UI", Tahoma, system-ui, sans-serif;
  --bfau-font-heading: var(--bfau-heading-font-latin), var(--bfau-heading-font-arabic), "Segoe UI", Tahoma, system-ui, sans-serif;
  --bfau-primary-border: var(--bfau-primary-emphasis);
  --bfau-primary-border-subtle: color-mix(in srgb, var(--bfau-primary) 35%, var(--bfau-surface));
  --bfau-border-subtle: var(--bfau-border);
  --bfau-focus-ring: var(--bfau-primary);
  --bfau-shadow-soft: var(--bfau-shadow);
  --bfau-auth-panel-muted: color-mix(in srgb, var(--bfau-auth-panel-text) 75%, transparent);

  /* A SOLID success button (white text painted directly on the fill, e.g. "Approve and list") needs
     its own background: --bfau-success alone measures ~2.4:1 for white text, well short of 4.5:1.
     Mixed toward BLACK rather than toward --bfau-text on purpose — --bfau-text is dark in light mode
     but LIGHT in dark mode, so a mix with it would lighten this in dark mode instead of darkening it.
     Black is the same in both modes, so this token stays dark (and the white text stays readable)
     without a separate dark-mode override. ~65% keeps it recognisably the brand teal; at 50% or
     below the margin over 4.5:1 gets thin. See .btn-success in admin.css. */
  --bfau-success-contrast: color-mix(in srgb, var(--bfau-success) 55%, #000000);
}

[data-bs-theme="dark"] {
  /* Brand */
  --bfau-primary: #3578be;
  --bfau-primary-rgb: 53, 120, 190;
  --bfau-primary-emphasis: #1d63a7;
  --bfau-primary-subtle: #172a3f;
  --bfau-on-primary: #ffffff;
  --bfau-primary-text: color-mix(in srgb, var(--bfau-primary) 46%, var(--bfau-text));
  --bfau-link: #6cb4ee;
  --bfau-link-rgb: 108, 180, 238;
  --bfau-secondary: #7b70ef;
  --bfau-secondary-rgb: 123, 112, 239;

  /* Status */
  --bfau-success: #02bc9c;
  --bfau-success-rgb: 2, 188, 156;
  --bfau-warning: #f9bf59;
  --bfau-warning-rgb: 249, 191, 89;
  --bfau-danger: #f7577e;
  --bfau-danger-rgb: 247, 87, 126;
  --bfau-info: #5bc3e1;
  --bfau-info-rgb: 91, 195, 225;

  /* Surfaces and text */
  --bfau-body-bg: #17181e;
  --bfau-body-bg-rgb: 23, 24, 30;
  --bfau-surface: #1e1f27;
  --bfau-surface-rgb: 30, 31, 39;
  --bfau-border: #293036;
  --bfau-text: #aab8c5;
  --bfau-text-rgb: 170, 184, 197;
  --bfau-text-muted: #8391a2;
  --bfau-text-muted-rgb: 131, 145, 162;

  /* The public website's headings and dark bands. */
  --bfau-heading: #f1f5f9;
  --bfau-dark-section: #0e0e0e;
  --bfau-on-photo: #ffffff;

  /* The WhatsApp buttons of the public website. */
  --bfau-whatsapp: #11806a;
  --bfau-on-whatsapp: #ffffff;

  /* Typography: per-script aliases from fonts.css (the Appearance screen picks them). */
  --bfau-font-latin: "bfau-latin-ibm-plex-sans-arabic";
  --bfau-font-arabic: "bfau-arabic-ibm-plex-sans-arabic";
  --bfau-heading-font-latin: "bfau-latin-ibm-plex-sans-arabic";
  --bfau-heading-font-arabic: "bfau-arabic-ibm-plex-sans-arabic";

  /* Shape */
  --bfau-radius: 0.3rem;
  --bfau-radius-lg: 0.4rem;
  --bfau-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.35);

  /* Sign-in page */
  --bfau-auth-panel-from: #0b1f36;
  --bfau-auth-panel-to: #173e68;
  --bfau-auth-panel-text: #f1f5f9;
}