/* ============================================================
   brand.css — the single source of truth for Reglio's identity.

   Every value here is the value the product already renders. This file
   does not restyle anything; it gives the existing colours, fonts, radii
   and shadows one place to live so they can be changed centrally.

   The two consuming layers keep their own names and simply point here:
     styles.css   :root { --primary: var(--brand-product-accent); ... }
     landing.css  .landing-page { --lp-orange: var(--brand-accent); ... }

   That indirection means every existing `var(--primary)` and
   `var(--lp-orange)` call site keeps working untouched.

   NOTE — Reglio currently ships TWO palettes on purpose:
     • the public landing page uses the orange/warm identity
     • the signed-in product uses the blue/cool identity
   They are preserved here exactly as they are. Unifying them is a design
   decision, not a refactor, and is deliberately not made in this file.
   ============================================================ */

:root {
  /* ── Identity ──────────────────────────────────────────────
     The Reglio orange, used across the public marketing surface. */
  --brand-accent:        #FF5A22;
  --brand-accent-deep:   #E8410C;
  --brand-accent-tint:   rgba(255, 90, 34, 0.10);

  /* The blue used throughout the signed-in product. */
  --brand-product-accent:       #3B82F6;
  --brand-product-accent-deep:  #2563EB;
  --brand-product-accent-tint:  #EFF6FF;

  /* The ink that sits ON the product accent — primary buttons, the active
     toggle, a selected chip.

     Those surfaces hardcoded `color: white`, which is correct for every accent
     dark enough to carry it and wrong for any that is not. A brand whose
     accent is a mid-tone green or yellow gets white-on-accent at around
     2.5:1 — below AA, on the primary action of the whole product. The existing
     white-label brands work around it by making their product accent an ink
     colour instead of their real accent, which is a workaround, not a choice.

     White here keeps Reglio, DriveWealth and Genius rendering byte-identically;
     a brand that needs dark ink on a light accent now has somewhere to say so
     instead of having to give up its accent. */
  --brand-on-primary:           #FFFFFF;

  /* ── Washes — the branded shell and the dashboard greeting band ──
     These two surfaces hardcoded Reglio's blue/green washes, so every tenant
     wore them. They are tokens now, but the defaults are the exact values that
     were hardcoded — deliberately not derived from the accent tokens, because
     that would recolour every existing brand (Reglio's --brand-accent-tint is
     orange, not the green its wash has always been). Reglio, DriveWealth and
     Genius set none of these and render as they did; a workspace that wants
     its own wash supplies these through its appearance tokens. */
  --brand-wash-shell-a:     rgba(59, 130, 246, 0.12);
  --brand-wash-shell-b:     rgba(16, 185, 129, 0.12);
  --brand-wash-shell-from:  #F8FAFC;
  --brand-wash-shell-to:    #FFFFFF;
  --brand-wash-hero-from:   rgba(239, 246, 255, 0.95);
  --brand-wash-hero-mid:    rgba(255, 255, 255, 0.98);
  --brand-wash-hero-to:     rgba(236, 253, 245, 0.92);
  --brand-wash-hero-line:   #D7E3F5;
  /* The three summary cards inside the greeting band sat on a hardcoded 78%
     white. On a dark ramp that is a pale grey slab carrying the ramp's own
     white text — unreadable. Same rule as above: defaults are the old values. */
  --brand-wash-hero-card:       rgba(255, 255, 255, 0.78);
  --brand-wash-hero-card-line:  rgba(209, 213, 219, 0.9);

  /* ── Neutrals — product (cool) ─────────────────────────── */
  --brand-surface:          #FFFFFF;
  --brand-surface-sunken:   #F8FAFC;
  --brand-text:             #111827;
  --brand-text-secondary:   #6B7280;
  /* AA on both surfaces (4.76:1 on white, 4.55:1 on --brand-surface-sunken)
     while staying a step lighter than --brand-text-secondary. The previous
     #94A3B8 measured 2.45:1 and is the reason ids and timestamps were hard to
     read at 11-12px. */
  --brand-text-muted:       #64748B;
  --brand-line:             #E5E7EB;
  --brand-line-soft:        #F3F4F6;

  /* ── Neutrals — marketing (warm) ───────────────────────── */
  --brand-canvas:           #F1F0EB;
  --brand-canvas-raised:    #FAF8F4;
  --brand-ink:              #131312;
  --brand-ink-soft:         #5B5B54;
  --brand-ink-faint:        #8C8C84;
  --brand-hairline:         rgba(19, 19, 18, 0.10);
  --brand-hairline-strong:  rgba(19, 19, 18, 0.16);

  /* Dark surfaces — these are where the inverted logo belongs. */
  --brand-dark:             #0D0D0C;
  --brand-dark-raised:      #1A1A18;
  --brand-dark-line:        rgba(255, 255, 255, 0.12);
  --brand-dark-ink:         rgba(255, 255, 255, 0.62);

  /* ── Status ────────────────────────────────────────────── */
  --brand-success:  #10B981;
  --brand-warning:  #F59E0B;
  --brand-danger:   #EF4444;
  /* The dashboard's "High risk" figure, a deeper red than "Failed" beside it.
     It was a hardcoded #7F1D1D, which is 1.76:1 on a dark ramp — invisible.
     The default is that exact value, so no existing brand moves. */
  --brand-danger-deep: #7F1D1D;

  /* ── Typography ────────────────────────────────────────────
     DM Sans is loaded by styles.css; IBM Plex Sans Arabic by index.html.
     Arabic falls back through DM Sans for any Latin glyphs in mixed text. */
  --brand-font:        'DM Sans', system-ui, sans-serif;
  --brand-font-arabic: 'IBM Plex Sans Arabic', 'DM Sans', system-ui, sans-serif;
  /* Headings resolve through their own token so a brand can pair a display face
     with a different UI face. Reglio uses one family for both, so this defaults
     to --brand-font and nothing about Reglio's typography changes. */
  --brand-font-display: var(--brand-font);

  /* ── Radii ─────────────────────────────────────────────── */
  --brand-radius-sm:  6px;
  --brand-radius:     10px;
  --brand-radius-lg:  16px;
  --brand-radius-xl:  20px;
  --brand-radius-pill: 999px;

  /* Marketing surfaces use a softer, larger set. */
  --brand-radius-marketing-sm: 10px;
  --brand-radius-marketing:    16px;
  --brand-radius-marketing-lg: 26px;
  --brand-radius-marketing-xl: 34px;

  /* ── Elevation ─────────────────────────────────────────── */
  --brand-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --brand-shadow:    0 4px 12px rgba(0, 0, 0, 0.08);
  --brand-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* ── Motion ────────────────────────────────────────────── */
  --brand-ease:    cubic-bezier(0.16, 1, 0.30, 1);
  --brand-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Focus ─────────────────────────────────────────────────
     Declared centrally so a future accessibility pass has one place to
     change. Existing focus styles are left exactly as they are. */
  --brand-focus-ring:   2px solid var(--brand-accent);
  --brand-focus-offset: 3px;

  /* ── Layout ────────────────────────────────────────────── */
  --brand-nav-height: 76px;
}