/*
 * ALOHAS product chrome — header, cards, chips, tables, badges, drawer, forms.
 * Consumes tokens from alohas-brand.css. No brand hex literals except the
 * badge tints (which have no brand token) and the warm app neutrals below.
 */
:root {
  --a-paper: #F6F3EE;
  --a-border: #E4DFD6;
  --a-border-soft: #EEE9E1;
  --a-hover: #F1ECE4;
  --a-faint: #9A948C;
  --a-ink-2: #495057;
  --a-accent-tint: rgba(74, 41, 50, .09);
}

body {
  background: var(--a-paper);
  color: var(--c-black);
  font-family: var(--font-corporate);
}

/* header + nav */
.header { background: var(--c-white); border-bottom: 1px solid var(--a-border); }
.header h1 { font-family: var(--font-corporate); font-weight: 600; letter-spacing: .04em; }
.header .nav a { color: var(--c-muted); }
.header .nav a:hover { color: var(--c-black); }

/* filter chips */
.filter-chip { border: 1px solid var(--a-border); background: var(--c-white); color: var(--a-ink-2); }
.filter-chip:hover { border-color: var(--c-light-gray); }
.filter-chip.active { background: var(--c-port-royale); color: var(--c-white); border-color: var(--c-port-royale); }

/* section titles */
.section-title { color: var(--c-muted); }

/* cards */
.briefing-card, .card, .kpi-card { background: var(--c-white); border: 1px solid var(--a-border); }
.briefing-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); border-color: var(--c-light-gray); }
.card-domain { color: var(--c-port-royale); }
.card-title { font-family: var(--font-corporate); font-weight: 600; color: var(--c-black); }
.tag { background: var(--a-border-soft); color: var(--a-ink-2); }
.card-groups { color: var(--a-faint); }

/* access badges — brand-hue mapping (spec) */
.card-access { font-weight: 700; }
.access-private    { background: #F0E2DE; color: #A8604E; }
.access-restricted { background: #EEE9E1; color: #4A2932; }
.access-public     { background: #E4EEE7; color: #5C8C6A; }
.access-app        { background: #EAF0FA; color: #3D5A7A; }

/* buttons */
.a-btn, .btn { font: inherit; border-radius: 8px; padding: 7px 14px; cursor: pointer; border: 1px solid transparent; }
.a-btn-primary { background: var(--c-port-royale); color: var(--c-white); font-weight: 600; transition: filter .15s ease; }
.a-btn-primary:hover { filter: brightness(1.15); }
.a-btn-ghost { background: var(--c-white); color: var(--a-ink-2); border-color: var(--a-border); }
.a-btn-ghost:hover { background: var(--a-hover); color: var(--c-black); }

/* tables */
.a-table { width: 100%; border-collapse: collapse; }
.a-table th { background: var(--a-border-soft); color: var(--a-ink-2); border-bottom: 2px solid var(--a-border); text-align: left; }
.a-table td { border-bottom: 1px solid var(--a-border-soft); }
.a-table tr:hover td { background: var(--a-hover); }

/* form controls */
input, select, textarea { border: 1px solid var(--a-border); border-radius: 8px; background: var(--c-white); color: var(--c-black); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--a-accent-tint); border-color: var(--c-port-royale); }