/* ============================================================================
   AVFX CRM — THEME
   ----------------------------------------------------------------------------
   Layer 3 of 4. Maps raw brand seeds onto ROLES that components use.
   Components reference the names in this file and never the seeds.

   The product is light-only (ADR-0011). This file is still separate from the
   brand seeds so that a second theme remains a single file to add, should one
   ever be wanted again.
   ========================================================================== */

:root {

  /* --- MIX TARGETS ------------------------------------------------------
     _derived.css mixes toward these to produce every variant.
     --t-bg  = "towards the background"  (lighter / paler)
     --t-fg  = "towards the foreground"  (darker / stronger)               */

  --t-bg: #FFFFFF;
  --t-fg: #000000;

  /* --- BASE COLOURS FOR THIS THEME -------------------------------------- */

  --color-primary: var(--seed-primary);
  --color-success: var(--seed-success);
  --color-danger:  var(--seed-danger);
  --color-warning: var(--seed-warning);
  --color-info:    var(--seed-info);
  --color-neutral: var(--seed-neutral);
  --color-purple:  var(--seed-purple);
  --color-brand:   var(--seed-red);

  /* --- SURFACES ---------------------------------------------------------
     The canvas is off-white, never pure white. Long reading on pure white
     causes letters to appear to shimmer. See ADR-0002.                    */

  --color-canvas:            #F4F5F7;
  --color-surface:           #FFFFFF;
  --color-surface-sunken:    #ECEEF1;
  --color-surface-hover:     #F5F6F8;
  --color-surface-selected:  color-mix(in srgb, var(--color-primary) 8%, #FFFFFF);

  /* --- BORDERS ---------------------------------------------------------- */

  --color-border-subtle: #EAECEF;
  --color-border:        #DADDE1;
  /* Reaches 3:1 against white, which is the minimum for a control boundary.
     An input's edge has to be visible, not merely tasteful. */
  --color-border-strong: #868C94;

  /* --- TEXT -------------------------------------------------------------
     Rooted in the brand charcoal so type and logo belong to one family.   */

  --color-text-primary:   #2A2A2A;   /* 14.8:1 on white                    */
  --color-text-secondary: #5F6368;   /*  6.4:1                             */
  --color-text-tertiary:  #6E7378;   /*  4.9:1                             */
  --color-text-disabled:  #A8ADB3;
  --color-text-inverse:   #FFFFFF;

  /* Text and icons sitting ON a filled accent colour — a primary button, a
     checked checkbox, a selected calendar day. The fills are dark, so this is
     white. It stays a token rather than a literal so a brand override that
     lightens the fills can flip it in one place. */
  --color-on-accent: #FFFFFF;

  /* Tooltips are deliberately dark, as native tooltips are. */
  --tip-bg: #1F1F1F; --tip-text: #F2F2F2; --tip-title: #FFFFFF; --tip-muted: #9A9A9A;

  /* --- SHELL CHROME -----------------------------------------------------
     Dark charcoal against the light content area. See ADR-0010.
     Because the top bar is dark, the logo-on-dark artwork is the correct one
     and never has to be swapped.                                          */

  --chrome-topbar-bg:     #262626;
  --chrome-sidebar-bg:    #2E2E2E;
  --chrome-text:          #E8E8E8;
  --chrome-text-muted:    #9A9A9A;
  --chrome-hover:         #3A3A3A;
  --chrome-active-bg:     #3A3A3A;
  /* The brand red, lifted so it clears 3:1 against charcoal. The pure brand
     red is correct on white but too dark on the chrome, and this marker is
     the only thing showing which page you are on. */
  --chrome-active-marker: color-mix(in srgb, var(--seed-red) 76%, #FFFFFF);
  --chrome-border:        #3D3D3D;
  /* The chrome is dark, so a light wash reads correctly on it. */
  --chrome-inset:         rgb(255 255 255 / .08);
  --chrome-inset-hover:   rgb(255 255 255 / .13);
  /* The page focus ring is a mid blue — invisible on charcoal. Keyboard users
     must be able to see where they are in the navigation. */
  --chrome-focus:         #8FC0FF;
  --chrome-heading:       #FFFFFF;
  --chrome-text-faint:    #7A7A7A;

  /* --- ELEVATION --------------------------------------------------------
     Hairline borders carry the structure; shadows stay subtle.            */

  --elev-1: 0 1px 2px rgba(16, 24, 40, .06);
  --elev-2: 0 2px 8px rgba(16, 24, 40, .08);
  --elev-3: 0 8px 24px rgba(16, 24, 40, .12);

  /* The edge of a pinned grid column, shown only once scrolled sideways. */
  --pin-shadow: 1px 0 0 var(--color-border), 4px 0 8px -4px rgb(0 0 0 / .12);

  --color-scrollbar-thumb: #C6CAD0;
  --color-backdrop:        rgba(20, 22, 26, .40);

  color-scheme: light;
}