/* ============================================================
   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;

  /* ── Neutrals — product (cool) ─────────────────────────── */
  --brand-surface:          #FFFFFF;
  --brand-surface-sunken:   #F8FAFC;
  --brand-text:             #111827;
  --brand-text-secondary:   #6B7280;
  --brand-text-muted:       #94A3B8;
  --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;

  /* ── 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;
}