/* ============================================================
   Midani — TIER 2 · SEMANTIC ROLES (themed light + dark)
   Product UI references THESE, never the primitives. A single
   [data-theme] swap re-skins everything. WCAG AA targeted.

   MIRRORED from the Midani Design System (claude.ai/design,
   project "Midani Design System", design/semantic.css).
   Do not hand-edit — re-pull to update. Client overrides for
   this portal live in signs-brand.css.
   ============================================================ */

/* ---------- LIGHT (default) ---------- */
:root, [data-theme="light"] {
  --brand:        var(--g-600);
  --brand-hover:  var(--g-700);
  --brand-active: var(--g-800);
  --brand-fg:     #FFFFFF;
  --brand-subtle: var(--g-50);
  --brand-subtle-fg: var(--g-700);
  --brand-border: var(--g-200);
  --brand-ring:   rgba(14,143,110,.16);

  --accent:        var(--accent-500);
  --accent-subtle: #FEF6E7;
  --accent-fg:     #5A3B05;

  --bg:             var(--n-50);
  --surface:        var(--n-0);
  --surface-2:      var(--n-25);
  --surface-sunken: var(--n-100);
  --surface-hover:  var(--n-100);
  --overlay:        rgba(21,27,34,.44);

  --text:          var(--n-900);
  --text-2:        var(--n-600);
  --text-3:        var(--n-500);
  --text-disabled: var(--n-400);
  --on-color:      #FFFFFF;

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-subtle: var(--n-100);

  --icon:          var(--n-700);
  --icon-2:        var(--n-500);
  --icon-disabled: var(--n-400);

  /* status */
  --success: var(--g-600);    --success-bg: var(--g-50);    --success-fg: var(--g-700);    --success-border: var(--g-200);
  --info:    var(--blue-600); --info-bg: var(--blue-50);    --info-fg: var(--blue-700);    --info-border: var(--blue-100);
  --warning: var(--amber-600);--warning-bg: var(--amber-50);--warning-fg: var(--amber-700);--warning-border: var(--amber-100);
  --danger:  var(--red-600);  --danger-bg: var(--red-50);   --danger-fg: var(--red-700);   --danger-border: var(--red-100);
  --neutral-bg: var(--n-100); --neutral-fg: var(--n-600);
  --purple:  var(--violet-600); --purple-bg: var(--violet-50); --purple-fg: var(--violet-600);

  /* elevation */
  --sh-xs:    0 1px 2px rgba(16,24,40,.05);
  --sh-sm:    0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --sh-md:    0 6px 16px -4px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);
  --sh-lg:    0 16px 32px -8px rgba(16,24,40,.16), 0 4px 10px -4px rgba(16,24,40,.08);
  --sh-xl:    0 28px 56px -12px rgba(16,24,40,.22);
  --sh-brand: 0 8px 20px -6px rgba(14,143,110,.35);

  /* focus ring */
  --focus-ring: 0 0 0 4px var(--brand-ring);
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --brand:        var(--g-400);
  --brand-hover:  var(--g-300);
  --brand-active: var(--g-200);
  --brand-fg:     #06241B;
  --brand-subtle: rgba(52,199,154,.12);
  --brand-subtle-fg: var(--g-300);
  --brand-border: rgba(52,199,154,.26);
  --brand-ring:   rgba(52,199,154,.22);

  --accent:        var(--accent-400);
  --accent-subtle: rgba(245,158,44,.14);
  --accent-fg:     #FFD79B;

  --bg:             #0C1116;
  --surface:        #141B22;
  --surface-2:      #18212A;
  --surface-sunken: #1C2730;
  --surface-hover:  #1F2A34;
  --overlay:        rgba(4,8,11,.6);

  --text:          #ECF1F5;
  --text-2:        #A8B4C0;
  --text-3:        #7E8A97;
  --text-disabled: #5A6573;
  --on-color:      #06241B;

  --border:        #28333D;
  --border-strong: #38454F;
  --border-subtle: #1E2832;

  --icon:          #C2CCD6;
  --icon-2:        #8995A2;
  --icon-disabled: #5A6573;

  --success: var(--g-400);  --success-bg: rgba(52,199,154,.14); --success-fg: var(--g-300); --success-border: rgba(52,199,154,.28);
  --info:    #6CA0FF;       --info-bg: rgba(46,107,230,.16);    --info-fg: #A9C6FF;        --info-border: rgba(108,160,255,.28);
  --warning: #F5B23C;       --warning-bg: rgba(224,137,11,.16); --warning-fg: #F8C870;     --warning-border: rgba(245,178,60,.28);
  --danger:  #FF7A70;       --danger-bg: rgba(224,72,61,.16);   --danger-fg: #FFB0A8;      --danger-border: rgba(255,122,112,.3);
  --neutral-bg: #1F2A34;    --neutral-fg: #A8B4C0;
  --purple:  #A98BF0;       --purple-bg: rgba(124,83,224,.18);  --purple-fg: #C7B2F7;

  --sh-xs:    0 1px 2px rgba(0,0,0,.4);
  --sh-sm:    0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sh-md:    0 6px 16px -4px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4);
  --sh-lg:    0 16px 32px -8px rgba(0,0,0,.6), 0 4px 10px -4px rgba(0,0,0,.45);
  --sh-xl:    0 28px 56px -12px rgba(0,0,0,.7);
  --sh-brand: 0 8px 22px -6px rgba(52,199,154,.4);
}