/* =========================================================================
   Bookrr OS — the brand skin over the Defcon PM kit.

   Source of truth: os/design/brand.json (captured from bookrr.io's own
   compiled CSS bundle, 2026-09-09 — navy/ivory/gold, light theme, Sora
   display + Inter body). Not a hand-picked palette.

   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 navy element per view. It is the thing you click.
     - Navy/gold are NEVER status colours. Stage health uses good/warn/bad.
   ===================================================================== */

:root {
  /* -- 1. The brand colour. Replaces the kit's blue everywhere. -------
     Navy is the clickable colour (the site's --primary). Gold is the
     site's own --ring / --accent — used for focus only, never a button. */
  --button-primary-bg:         #0b1d3a;
  --button-primary-border:     #0b1d3a;
  --button-primary-bg-hover:   #14294f;
  --button-primary-bg-pressed: #071224;
  --text-brand:                #0b1d3a;
  --border-brand:              #0b1d3a;
  --border-focus:              #d4af37;

  /* -- 2. Surfaces. bookrr.io is light (ivory ground, white cards) —
     close to the kit's own light default, so this is a tint, not a flip. */
  --bg-primary:        #ffffff;   /* cards — the site's --card */
  --bg-primary_hover:  #f7f4ed;   /* nested / hover, into the page ground */
  --bg-secondary:      #f7f4ed;   /* the page ground — the site's --ivory */
  --bg-tertiary:       #e6e2d9;   /* chrome: sidebar, callouts — --warm-gray */
  --bg-tertiary_hover: #ded8c9;   /* COMPUTED: warm-gray darkened for hover */

  /* -- 3. Ink. Navy for headings, deep-blue for secondary, muted for body. */
  --text-primary:     #0b1d3a;   /* headings, names — the site's --navy */
  --text-secondary:   #102a54;   /* the site's --deep-blue */
  --text-tertiary:    #5b6478;   /* the site's --muted-foreground */
  --text-placeholder: #8b93a5;   /* COMPUTED: interpolated, muted-fg -> warm-gray */
  --text-white:       #ffffff;
  --icon-primary:     #5b6478;
  --icon-secondary:   #8b93a5;
  --icon-white:       #ffffff;

  /* -- 4. Lines. Warm-gray hairlines, not the kit's cool grey. --------- */
  --border-primary:       #e6e2d9;   /* separates regions — --warm-gray */
  --border-secondary:     #efece3;   /* COMPUTED: lighter, separates rows */
  --border-primary_hover: #d4cdb8;   /* COMPUTED: warm-gray darkened */
  --border-quartiary:     #5b6478;
  --border-inverse:       #ffffff;
  --border-error:         #f59999;

  /* -- 5. Type. Sizes stay; only the family moves. --------------------
     Both are on Google Fonts and loaded in index.html — no licensing
     wall like LeadLift's Neue Haas Grotesk. Inter is also vendored here
     already (assets/inter.css) for the body face with no external call. */
  --font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-header-h1: 700 32px/44px var(--font-display);
  --font-header-h2: 700 28px/36px var(--font-display);
  --font-header-h3: 600 24px/32px var(--font-display);
  --font-header-h4: 600 18px/24px var(--font-display);

  /* -- 6. Radius. The site's own --radius is .75rem (12px); this keeps
     that as --radius-sm and holds the kit's ratio around it. ----------- */
  --radius-xs:    8px;
  --radius-sm:    12px;
  --radius-md:    16px;
  --radius-lg:    20px;
  --radius-badge: 999px;
  --radius-pill:  999px;

  /* -- 7. Status. NEVER navy or gold. A blocked campaign must not read
        as the thing to click. Standard green/amber/red, not derived from
        the brand palette. -------------------------------------------- */
  --good: #16a34a;
  --warn: #d97706;
  --bad:  #dc2626;
  --bad-strong: #b91c1c;
  --tint-good: rgba(22,163,74,0.12);
  --tint-bad:  rgba(220,38,38,0.12);
  --tint-warn: rgba(217,119,6,0.12);
  --tint-accent: rgba(11,29,58,0.08);
  --text-success: #16a34a;
  --text-error:   #dc2626;
}

/* -- 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
   . the kit's --color-grey-* ramp — left untouched; bookrr.io is light like
     the kit's own default, so no wholesale ramp recompute was needed the
     way LeadLift's light-to-dark flip required.
   ------------------------------------------------------------------- */