/* =========================================================================
   LeadLift OS - the brand skin over the Defcon PM kit.

   GENERATED FILE. Do not hand-edit: `python3 os/design/brand_css.py`
   rewrites it from os/design/brand.json, which is the source of truth for
   every value here. Change the brand there, regenerate, reload.

   Load order (VENDORING.md, not optional):
     tokens.css  ->  brand.css  ->  defcon.css  ->  app.css

   The kit owns structure - every padding, height, gap and type SIZE.
   This file owns the skin - colour, type family, the radius scale. Not one
   padding moves. A structural change belongs in the kit, not here.

   Two rules travel with this brand and hold on every screen:
     - ONE filled orange element per view. It is the thing you click.
     - Orange is NEVER a status colour. Health and drift use good/warn/bad.
   ===================================================================== */

:root {
  /* -- 1. The brand colour. Replaces the kit's blue everywhere. ------- */
  --button-primary-bg:         #E85D04;
  --button-primary-border:     #E85D04;
  --button-primary-bg-hover:   #FF6E12;
  --button-primary-bg-pressed: #CC5204;   /* COMPUTED: accent darkened 12% */
  --button-secondary-bg:       transparent;
  --button-secondary-border:   rgba(255,255,255,0.14);
  --text-brand:                #E85D04;
  --border-brand:              #E85D04;
  --border-focus:              #E85D04;

  /* -- 2. Surfaces. Light kit -> dark product, one swap per token. ---- */
  --bg-primary:        #0A0A0A;   /* content and cards - the brand's panel */
  --bg-primary_hover:  #101012;   /* nested / hover */
  --bg-secondary:      #050505;   /* the page ground */
  --bg-tertiary:       #050505;   /* chrome: sidebar, callouts */
  --bg-tertiary_hover: #101012;

  /* -- 3. Ink. Most text is #99A1AF. White is reserved. ---------------- */
  --text-primary:     #FFFFFF;   /* headings, names, the one number that matters */
  --text-secondary:   #D1D5DC;
  --text-tertiary:    #99A1AF;   /* the brand's body copy - labels, meta, cells */
  --text-placeholder: #6A7282;
  --text-white:       #FFFFFF;
  --icon-primary:     #99A1AF;
  --icon-secondary:   #6A7282;
  --icon-white:       #FFFFFF;

  /* -- 4. Lines. Hairlines, not borders. ------------------------------ */
  --border-primary:       rgba(255,255,255,0.14);   /* separates regions */
  --border-secondary:     rgba(255,255,255,0.06);   /* separates rows inside a region */
  --border-primary_hover: rgba(255,255,255,0.24);  /* COMPUTED: hairline lifted for hover */
  --border-quartiary:     #99A1AF;
  --border-inverse:       transparent;
  --border-error:         #FB2C36;

  /* -- 5. Type. Sizes stay; only the family moves. --------------------- */
  /* Neue Haas Grotesk is a Monotype commercial family. It is NOT on Google
     Fonts and needs a paid webfont licence before it can be self-hosted or
     served, so nothing here loads a NHG file. Until a licence is bought the
     stack falls through to Helvetica Neue / Helvetica / Arial - the closest
     free grotesque, native on macOS, so every screen still reads. */
  --font-family: "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* LeadLift's two display faces, from Google Fonts, loaded in index.html. */
  --font-display: "Barlow Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Headings keep the kit's SIZES and line-heights and take LeadLift's own
     face and weight (Montserrat 900) - design/BRIEF.md section 4. */
  --font-header-h1: 900 32px/44px var(--font-heading);
  --font-header-h2: 900 28px/36px var(--font-heading);
  --font-header-h3: 900 24px/32px var(--font-heading);
  --font-header-h4: 900 18px/24px var(--font-heading);

  /* -- 6. Radius. Rounded, not sharp: 14.4px is the brand's default. --- */
  /* Keep the ratio xs < sm <= md < lg or the components stop agreeing. */
  --radius-xs:    4px;
  --radius-sm:    14.4px;
  --radius-md:    14.4px;
  --radius-lg:    16px;
  --radius-badge: 9999px;
  --radius-pill:  9999px;

  /* -- 7. Status. NEVER the brand colour. A blocked launch must not read
        as a call to action. --------------------------------------------- */
  --good: #05DF72;
  --warn: #E8A004;   /* DERIVED - the live page carries no amber */
  --bad:  #FF6467;
  --bad-strong: #FB2C36;
  --tint-good: rgba(16,40,16,0.3);
  --tint-bad:  rgba(40,10,10,0.3);
  --tint-warn: rgba(40,30,4,0.30);   /* DERIVED, matched to the two above */
  --tint-accent: rgba(232,93,4,0.10);
  --text-success: #05DF72;
  --text-error:   #FF6467;

  /* -- 8. Greys the kit uses as SURFACES, re-pointed at the dark ramp.
        COMPUTED by mixing the brand's own ground, panel and inks - the kit's
        light ramp would read as white plates on a black page. ----------- */
  --color-grey-25: #080808;
  --color-grey-50: #0A0A0A;
  --color-grey-100: #101012;
  --color-grey-200: #191A1E;
  --color-grey-300: #21252B;
  --color-grey-400: #4A5565;
  --color-grey-500: #6A7282;
  --color-grey-600: #6A7282;
  --color-grey-700: #99A1AF;
  --color-grey-800: #D1D5DC;
  --color-grey-900: #FFFFFF;
}

/* -- What does NOT belong in this file ---------------------------------
   . any padding, gap, height or width
   . the type SCALE (14/22 body, 12/18 meta, 16/24 section) - family only
   . column widths, the 280 sidebar, the 56 header, the 36 toolbar
   . anything that belongs in components/defcon.css
   Those are structural. They get argued in the kit's components.md.
   ------------------------------------------------------------------- */