/* ============================================================
   STELAV brand tokens — single source of truth for colour.
   ============================================================

   Load this BEFORE any other stylesheet, on every page, then reference the
   variables rather than writing hex values. Hex literals are currently spread
   across css/styles.css (public site) and css/style.css (admin panel), and the
   two disagree: the admin panel uses a generic slate/blue palette that is not
   the company's brand at all.

   Adopt incrementally — new work uses the tokens; existing rules get migrated
   as they are touched.

   Note on the revamp: the design brief moves the public site to cream grounds
   with charcoal type and restrained gold accents. That is a Phase 1 change and
   is NOT reflected here, because the live site and the logo are still
   navy/orange. When Phase 1 lands, add the new palette as a second block and
   switch consumers over without hunting for hex codes.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. LOGO PALETTE — sampled directly from images/logo.png.
     ----------------------------------------------------------
     Measured by decoding the PNG and counting opaque pixels, so these are the
     artwork's actual values, not an approximation. Share of the non-white mark:

       orange  #F6931E  11.8%   the building blocks and window panes
       green   #008000   9.8%   the "L"
       blue    #0000FF   7.0%   the "S"
       indigo  #2E3094   2.2%   the roofline and window frames

     These exist so the artwork's colours are recorded exactly. They are NOT all
     usable as UI colours — see the contrast notes in section 2. */
  --logo-orange:         #f6931e;
  --logo-green:          #008000;
  --logo-blue:           #0000ff;
  --logo-indigo:         #2e3094;

  /* ----------------------------------------------------------
     2. UI PALETTE — what components should actually reference.
     ----------------------------------------------------------
     Contrast ratios below are against white, computed per WCAG 2.1.
     AA needs 4.5:1 for body text and 3:1 for large text and UI boundaries. */

  /* Primary. Safe for text and for white-on-navy surfaces. */
  --brand-navy:          #001845;   /* 17.26:1 — text and buttons */
  --brand-navy-deep:     #000f2b;   /* darker end of gradients */
  --brand-navy-soft:     var(--logo-indigo);   /* 10.68:1 — text safe */
  --brand-navy-hover:    #242873;   /* 12.91:1 — hover for navy-soft buttons */

  /* Accent. NOTE both oranges are 2.3-2.5:1 on white — DECORATIVE ONLY.
     Never put white text on them and never use them for body copy. For an
     orange button, use --brand-navy as the label colour (6.95:1).

     The live site's stylesheets use #fb8500 while the logo artwork is #f6931e.
     Kept separate rather than silently changing the site's accent; reconcile to
     one value during Phase 1. */
  --brand-orange:        #fb8500;
  --brand-orange-hover:  #e07600;
  /* Text-safe orange, for orange type or icons on a LIGHT ground: 5.18:1 on white, where
     --brand-orange is 2.48:1 and fails at any size. Do not use it on navy -- it drops to
     3.33:1 there, so keep --brand-orange for anything sitting on a dark ground. */
  --brand-orange-text:   #c2410c;
  --brand-orange-tint:   rgba(251, 133, 0, 0.18);   /* focus rings, glows */

  /* Neutrals */
  --brand-charcoal:      #1f2933;   /* body text */
  --brand-muted:         #6b7280;   /* secondary text */
  --brand-muted-hover:   #4b5563;   /* 7.56:1 — hover for muted-filled buttons */
  --brand-border:        #d8dee9;
  --brand-surface:       #ffffff;
  --brand-surface-alt:   #f9fafb;
  --brand-on-navy-muted: #cccccc;      /* 11.66:1 on navy, 1.48:1 on white — dark grounds only */

  /* Status. Success borrows the logo's green, which happens to be text-safe at
     5.14:1. Danger and info are deliberately outside the brand palette so a
     warning never reads as a brand accent, or vice versa. */
  --brand-success:       var(--logo-green);
  --brand-success-bg:    #f0fdf4;
  --brand-danger:        #b91c1c;
  --brand-danger-hover:  #991b1b;   /* 8.31:1 */
  --brand-danger-bg:     #fef2f2;
  --brand-info:          #1e40af;
  --brand-info-bg:       #eff6ff;
  /* Amber, kept deliberately distinct from --brand-orange so a warning is never
     mistaken for a brand accent. */
  --brand-warning:       #b45309;

  /* Scrims for darkening photography behind text or cards.
     Deliberately a near-neutral ink rather than --brand-navy: that navy is heavily
     saturated (#001845) and at scrim opacities it swamps the image underneath,
     turning a building photo into a flat blue field. */
  --brand-ink:           #0a1220;
  --brand-scrim-top:     rgba(10, 18, 32, 0.58);
  --brand-scrim-bottom:  rgba(4, 9, 18, 0.80);
  --brand-scrim-modal:   rgba(0, 0, 0, 0.7);    /* behind the project modal */

  /* Focus ring. A double ring -- white inner, navy outer -- so it stays visible on any
     surface. A single navy ring is only 1.65:1 against the danger button, and invisible
     on the navy header; the white inner ring guarantees separation everywhere. */
  --brand-focus-ring:    0 0 0 2px var(--brand-surface), 0 0 0 4px var(--brand-navy-soft);

  /* Elevation.
     Two layers rather than one: a tight, darker shadow defines the card's edge
     against light backgrounds, and a wide soft one gives the lift. A single large
     blur disappears wherever the photo behind it is bright, which left the login
     card looking pasted on at its right edge and floating on the left. */
  --brand-shadow-card:   0 2px 6px rgba(0, 8, 24, 0.30),
                         0 22px 60px rgba(0, 8, 24, 0.48);
  --brand-radius:        10px;
}