/* Rastle brand theme: the Rastle brand kit (October 2026, v1) as dashboard tokens.

   Loaded after tokens.css, so every token below replaces the product's own and
   no component sheet changes: the palette stays in token blocks, and a rule in
   this file names tokens, never a colour. tests/test_brand_theme.py holds both
   to that, and holds every text colour to 7:1.

   Kit colours: Mat Black #12151A, Lucha Blue #4463AE, Title Gold #E4AD34, Rope
   Pink #F43F7A, Guard Teal #0D9488, Canvas #F1F4F8. The kit's own text colours
   reach 5.2 to 6.7:1; this theme darkens or lightens each to hold 7:1, which the
   kit does not list. --bad is one of them: the kit has no red and no pink text,
   so error text is a deep rose derived from Rope Pink. Pink stays a fill.

   The third scheme, stored as "molten", is Lucha here (theme.json names it):
   Mat Black under a blue glow, with metallic gold on the small marks. */

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2")}

:root{
  /* Light: Canvas ground, white cards, Mat Black ink. */
  --auth:#344B86; --auth-deep:#2A3C6D;
  --lava:#E4AD34; --lava-deep:#694800; --lava-hover:#C99A2A;
  --ink:#12151A; --muted:#474C57; --placeholder:#646A73;
  --paper:#F1F4F8; --surface:#fff;
  --line:#D5DAE2; --line-strong:#9CA3AF; --tint:#EDF1F5;
  --ok:#0A5850; --warn:#694800; --bad:#8B2345;
  --ok-fill:#E1F2F0; --warn-fill:#FAF1D8; --bad-fill:#FCE4EC;
  --neutral-fill:#EEF1F5; --info-fill:#E4EAF7;
  --lava-fill:#FBF2D9; --lava-fill-line:#EFDCA5; --mark:#F4DFA8;
  --btn-bg:#4463AE; --btn-bg-hover:#344B86;
  --on-accent:#fff; --tip-bg:#12151A; --heading:var(--ink);

  /* Catalog categories, from the kit's four hues. Fills, never text. */
  --group-policies:#4463AE; --group-org:#7F9BE0; --group-resources:#0D9488;
  --group-impact:#B8325F; --group-lifecycle:#C99A2A; --group-data:#37508D;
  --group-info:#4ABBAE; --group-use:#0B6B63; --group-thirdparty:#E4AD34;
  --group-seceng:#5E6B84; --group-agentsafety:#F43F7A;
  --group-unclassified:#6B7280;

  /* Shape: chips 4, buttons 8, cards 16, pill ropes. */
  --r-xs:4px; --r-sm:4px; --r:8px; --r-card:16px; --r-pill:999px;

  /* Type: Plus Jakarta Sans for the interface and titles, JetBrains Mono for
     data. Self-hosted beside this file, so the content-security policy needs
     no font host. */
  --font-ui:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-head:"Plus Jakarta Sans",var(--font-ui);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Neutral shadows; the product's are navy-tinted. */
  --shadow-header:0 1px 2px rgba(18,21,26,.08);
  --shadow-card:0 1px 3px rgba(18,21,26,.06);
  --shadow-pop:0 8px 24px rgba(18,21,26,.14);
  --shadow-panel:0 4px 14px rgba(18,21,26,.10);
  --shadow-tip:0 8px 24px rgba(18,21,26,.18);

  /* The sign-in page is always Mat Black under a blue glow. */
  --grad-auth:radial-gradient(120% 70% at 50% -10%,#1E2F63 0%,#12151A 62%);
  --grad-flame:linear-gradient(90deg,#F6DB86,#E4AD34 45%,#B8861B 70%,#F0C85A);
  --glow-flame:none;

  /* Brand tokens: values the rules below read. Header: Lucha Blue with white
     ink (5.8:1); the muted ink is 4.5:1 on it. */
  --brand-hdr-bg:#4463AE; --brand-hdr-ink:#fff; --brand-hdr-muted:#DCE4F7;
  --brand-hdr-hover:rgba(255,255,255,.16); --brand-hdr-rule-w:0;
  --brand-teal:#0D9488; --brand-pink:#F43F7A;
  /* Gold ring, deepened on the light ground where Title Gold is 1.8:1. */
  --brand-focus:#A67C00;
  --brand-card-edge-h:0px; --brand-card-glow:var(--shadow-card); --brand-nav-mark:#fff; --brand-hdr-sheen:none;
  /* The R badge is round and carries the brand alone, so it is larger than a
     wordmark would be: 56px in the header, 64px above the sign-in card. */
  --brand-logo-h:56px; --brand-logo-h-login:64px;
  /* The sign-in frame is drawn straight on the Mat Black ground, so its text is
     light in every scheme (the page sets no data-theme). 7:1 on both stops of
     --grad-auth; the error rose is a lighter --bad. */
  --brand-login-ink:#F1F4F8; --brand-login-muted:#C3CAD6; --brand-login-err:#FFA6C4;
  --brand-login-line:rgba(241,244,248,.34);
}
:root[data-theme="dark"]{
  --paper:#12151A; --surface:#1B2028; --tint:color-mix(in srgb,var(--ink) 8%,transparent);
  --ink:#F1F4F8; --muted:#A8B0BC; --placeholder:#8C95A1;
  --line:color-mix(in srgb,var(--ink) 14%,transparent);
  --line-strong:color-mix(in srgb,var(--ink) 30%,transparent);
  --auth:#91A9E4;
  --lava:#E4AD34; --lava-deep:#E4AD34; --lava-hover:#F0C85A;
  --lava-fill:color-mix(in srgb,var(--lava) 16%,transparent);
  --lava-fill-line:color-mix(in srgb,var(--lava) 32%,transparent);
  --mark:color-mix(in srgb,var(--lava) 28%,transparent);
  --ok:#4ABBAE; --warn:#E4AD34; --bad:#F886AB;
  --ok-fill:color-mix(in srgb,var(--ok) 14%,transparent);
  --warn-fill:color-mix(in srgb,var(--warn) 14%,transparent);
  --bad-fill:color-mix(in srgb,var(--bad) 16%,transparent);
  --neutral-fill:color-mix(in srgb,var(--muted) 12%,transparent);
  --info-fill:color-mix(in srgb,var(--auth) 14%,transparent);
  --btn-bg:#4463AE; --btn-bg-hover:#5573BE; --on-accent:#fff;
  --tip-bg:#2B323D; --heading:var(--ink);
  --shadow-header:0 1px 2px rgba(0,0,0,.30);
  --shadow-card:0 1px 2px rgba(0,0,0,.30);
  --shadow-pop:0 10px 30px rgba(0,0,0,.40);
  --shadow-panel:0 6px 20px rgba(0,0,0,.40);
  --shadow-tip:0 8px 24px rgba(0,0,0,.45);
  --brand-hdr-bg:#4463AE; --brand-hdr-ink:#fff; --brand-hdr-muted:#DCE4F7;
  --brand-hdr-hover:rgba(255,255,255,.16); --brand-hdr-rule-w:0;
  --brand-teal:#0D9488; --brand-pink:#F43F7A; --brand-focus:#E4AD34;
  --brand-card-edge-h:0px; --brand-card-glow:var(--shadow-card); --brand-nav-mark:#fff; --brand-hdr-sheen:none;
}
:root[data-theme="molten"]{
  /* Lucha: the dark ground under a blue glow, a more saturated surface. */
  --paper:radial-gradient(130% 80% at 50% -15%,#2D47A0 0%,#18244F 36%,#12151A 70%);
  --surface:#171D2E; --tint:color-mix(in srgb,var(--auth) 10%,transparent);
  --ink:#F1F4F8; --muted:#A8B0BC; --placeholder:#8C95A1;
  --line:color-mix(in srgb,var(--auth) 24%,transparent);
  --line-strong:color-mix(in srgb,var(--auth) 46%,transparent);
  --auth:#91A9E4;
  --lava:#E4AD34; --lava-deep:#E4AD34; --lava-hover:#F0C85A;
  --lava-fill:color-mix(in srgb,var(--lava) 16%,transparent);
  --lava-fill-line:color-mix(in srgb,var(--lava) 34%,transparent);
  --mark:color-mix(in srgb,var(--lava) 28%,transparent);
  --ok:#4ABBAE; --warn:#E4AD34; --bad:#F783A9;
  --ok-fill:color-mix(in srgb,var(--ok) 14%,transparent);
  --warn-fill:color-mix(in srgb,var(--warn) 14%,transparent);
  --bad-fill:color-mix(in srgb,var(--bad) 16%,transparent);
  --neutral-fill:color-mix(in srgb,var(--muted) 12%,transparent);
  --info-fill:color-mix(in srgb,var(--auth) 14%,transparent);
  --btn-bg:#4463AE; --btn-bg-hover:#5573BE; --on-accent:#fff;
  --tip-bg:#2B323D; --heading:var(--ink);
  --shadow-header:0 1px 2px rgba(0,0,0,.35);
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
  --shadow-pop:0 10px 30px rgba(0,0,0,.45);
  --shadow-panel:0 6px 20px rgba(0,0,0,.45);
  --shadow-tip:0 8px 24px rgba(0,0,0,.50);
  --glow-flame:0 2px 16px 0 rgba(68,99,174,.6);
  --brand-hdr-bg:#4463AE; --brand-hdr-ink:#fff; --brand-hdr-muted:#DCE4F7;
  --brand-hdr-hover:rgba(255,255,255,.16); --brand-hdr-rule-w:4px;
  --brand-teal:#0D9488; --brand-pink:#F43F7A; --brand-focus:#E4AD34;
  /* Lucha's flare: a gold edge across each card, a blue glow around it and under
     primary buttons, a gold mark on the current page, a header that deepens to
     the right. */
  --brand-card-edge-h:2px; --brand-nav-mark:#E4AD34;
  --brand-card-glow:0 0 0 1px color-mix(in srgb,var(--auth) 16%,transparent),0 10px 32px color-mix(in srgb,var(--btn-bg) 26%,transparent);
  --brand-hdr-sheen:linear-gradient(90deg,rgba(18,21,26,0) 0%,rgba(18,21,26,.34) 100%);
}

/* ---- Structure -------------------------------------------------------------
   The looks the kit asks for that a token cannot carry. This sheet loads after
   the component sheets, so a rule here wins a tie; every value is a token. */

/* Header: Lucha Blue with white ink, and in Lucha a metallic gold rule below. */
:root[data-brand] header{background:var(--brand-hdr-bg);color:var(--brand-hdr-ink);
  border-bottom:var(--brand-hdr-rule-w) solid transparent;border-image:var(--grad-flame) 1;
  box-shadow:none;background-image:var(--brand-hdr-sheen)}
:root[data-brand] header .brand-logo,:root[data-brand] header .brand-word{color:var(--brand-hdr-ink)}
:root[data-brand] header .powered-by{color:var(--brand-hdr-muted)}
:root[data-brand] .topnav a{color:var(--brand-hdr-muted)}
:root[data-brand] .topnav a:hover,:root[data-brand] .topnav a.nav-pending{
  background:var(--brand-hdr-hover);color:var(--brand-hdr-ink)}
:root[data-brand] .topnav a[aria-current=page]{color:var(--brand-hdr-ink);background:transparent;
  border-radius:0;box-shadow:inset 0 -2px 0 var(--brand-nav-mark)}
:root[data-brand] .menu-btn,:root[data-brand] .avatar-btn{background:transparent;
  border-color:var(--brand-hdr-ink);color:var(--brand-hdr-ink)}
:root[data-brand] .menu-btn span{background:var(--brand-hdr-ink)}
:root[data-brand] .menu-btn:hover,:root[data-brand] .avatar-btn:hover,
:root[data-brand] .bell-btn:hover{background:var(--brand-hdr-hover)}
:root[data-brand] .avatar-btn.current{border-color:var(--brand-hdr-ink);
  box-shadow:0 0 0 2px var(--brand-hdr-hover)}
:root[data-brand] .bell-btn{color:var(--brand-hdr-ink)}
:root[data-brand] header :focus-visible{outline-color:var(--brand-hdr-ink)}

/* The logo, larger. */
:root[data-brand] header .brand .logo{height:var(--brand-logo-h)}
/* The header's height follows the logo, so its own padding gives way. */
:root[data-brand] header{padding-top:8px;padding-bottom:8px}
:root[data-brand] .box .brand .logo{height:var(--brand-logo-h-login)}

/* Sign-in: no card and no edge. Light text on the dark ground, with no
   background, border, shadow or gold seam around it. */
:root[data-brand] .box{background:transparent;border:0;
  box-shadow:none;color:var(--brand-login-ink)}
:root[data-brand] .box::before{display:none}
:root[data-brand] .box .brand-logo,:root[data-brand] .box .brand-word,
:root[data-brand] .box .title{color:var(--brand-login-ink)}
:root[data-brand] .box .sub,:root[data-brand] .box .powered-by,:root[data-brand] .box .foot,
:root[data-brand] .box .idle-note,:root[data-brand] .box .loadtxt{color:var(--brand-login-muted)}
:root[data-brand] .box .err{color:var(--brand-login-err)}
:root[data-brand] .box .btn{background:transparent;border-color:var(--brand-login-line);
  color:var(--brand-login-ink);box-shadow:none}
:root[data-brand] .box .btn:hover{background:var(--brand-hdr-hover);
  border-color:var(--brand-login-ink)}
:root[data-brand] .box .btn:focus,:root[data-brand] .box .btn:focus-visible{
  outline-color:var(--lava)}
:root[data-brand] .box .spinner{border-color:var(--brand-login-line);
  border-top-color:var(--lava)}

/* Cards: in Lucha a gold edge across the top and a blue glow. */
:root[data-brand] .card{background:var(--grad-flame) top left/100% var(--brand-card-edge-h) no-repeat,var(--surface);
  box-shadow:var(--brand-card-glow)}

/* Focus ring: gold everywhere but on the blue header, where it is white. */
:root[data-brand] :focus-visible,:root[data-brand] input:focus,:root[data-brand] textarea:focus,
:root[data-brand] select:focus,:root[data-brand] .btn:focus{
  outline:2px solid var(--brand-focus);outline-offset:2px}
:root[data-brand] #profile-panel .seg:focus-visible{outline:2px solid var(--brand-focus);
  outline-offset:-2px}

/* Status pills: a dot and a mono label, no fill. */
:root[data-brand] .pill{background:transparent;color:var(--ink);padding-left:0;padding-right:0;
  font-family:var(--font-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
:root[data-brand] .pill::before{content:"";display:inline-block;width:8px;height:8px;
  border-radius:var(--r-pill);background:var(--muted);margin-right:6px}
:root[data-brand] .pill.fresh::before,:root[data-brand] .pill.st-prepared::before,
:root[data-brand] .pill-active::before{background:var(--brand-teal)}
:root[data-brand] .pill.stale::before,:root[data-brand] .pill.st-returned::before,
:root[data-brand] .pill-wait::before,:root[data-brand] .pill-pending::before{background:var(--lava)}
:root[data-brand] .pill.halt::before{background:var(--brand-pink)}

/* Option tips: a card with a shadow, not a dark tile. */
:root[data-brand] .iw-cards .iw-tip,:root[data-brand] .iw-chips .iw-tip{background:var(--surface);
  color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-tip)}

/* Progress: blue with a gold cap. */
:root[data-brand][data-theme] .iw-prog i{background:var(--btn-bg);
  box-shadow:inset -5px 0 0 var(--lava)}

/* Table headers: mono capitals on a tint. */
:root[data-brand] th{font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--tint)}

/* The assistant's answer sits under a gold rule. */
:root[data-brand] .search-answer{border-top:2px solid var(--lava)}

/* The ask bar's own focus ring: the bar draws it, since its input draws none. */
:root[data-brand] .desk-bar form.ask:focus-within{outline-color:var(--brand-focus)}

/* The ask bar's button is Lucha Blue, the kit's primary; Title Gold stays for the one championship action. */
:root[data-brand] .desk-bar form.ask .btn{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--on-accent)}
:root[data-brand] .desk-bar form.ask .btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}

/* Banners: a tinted card with a dot, not a bar down the side. */
:root[data-brand] .ok-note,:root[data-brand] .err,:root[data-brand] .warnbox{position:relative;
  border-left:0;border-radius:var(--r);padding:10px 14px 10px 34px;color:var(--ink)}
:root[data-brand] .ok-note::before,:root[data-brand] .err::before,
:root[data-brand] .warnbox::before{content:"";position:absolute;left:14px;top:17px;width:8px;
  height:8px;border-radius:var(--r-pill)}
:root[data-brand] .ok-note::before{background:var(--brand-teal)}
:root[data-brand] .err::before{background:var(--brand-pink)}
:root[data-brand] .warnbox::before,:root[data-brand] .err.blc-warn::before{background:var(--lava)}

/* Findings: each framework's findings are one card, the rows divided by hairlines. */
:root[data-brand] .wb-group{background:var(--grad-flame) top left/100% var(--brand-card-edge-h) no-repeat,var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--brand-card-glow);
  margin:0 0 18px;overflow:hidden}
:root[data-brand] .wb-group .wb-fw{padding:14px 18px 8px;margin:0}
:root[data-brand] .wb-row{background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;margin:0}

/* Empty states: the R badge above the words, no dashed box. */
:root[data-brand] .empty{border:0;text-align:center;padding:24px 16px}
:root[data-brand] .empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto 10px;
  background:url("logo.svg") center/contain no-repeat}
:root[data-brand] .empty-head,:root[data-brand] .empty-body{text-align:center;max-width:62ch;
  margin-left:auto;margin-right:auto}