/* Cornerstone Heritage HQ (made-up sample): the brand's one accent, the top bar and the page head.
   Every other color comes from /look/look.css. The teal is set here as tokens so each page has it before any
   script runs (no flash); brand.js holds the same values (a test keeps them in step). */

/* ---- brand: one accent, heritage teal ---- */
:root, [data-theme="light"] { --cs-accent: #1E7471; --cs-on-accent: #FFFFFF; --cs-accent-soft: #E3F1F0; --accent: #1E7471; }
[data-theme="dark"] { --cs-accent: #4FB0A9; --cs-on-accent: #0E1520; --cs-accent-soft: rgba(79,176,169,.16); --accent: #4FB0A9; }
/* Night Studio: the main buttons and the room you're in use the teal, so one action has one color */
:root[data-theme="dark"] { --accent-strong: #4FB0A9; --on-accent-strong: #0E1520; }
/* the tour's tag, its "Your turn" words and the tag beside the outline are the brand's teal in both looks, as drawn
   (tour.css comes after this file on the rooms' pages, so these ask for a little more than its own rules) */
.hq bb-tour .tr-tag, .hq .tr-ring-tag { background: var(--cs-accent); color: var(--cs-on-accent); }
.hq bb-tour .tr-turn { color: var(--cs-accent); }

/* ---- the page ---- */
body.hq { padding: 20px 24px 32px; }
.hq-page { display: grid; gap: 14px; max-width: 1440px; margin: 0 auto; }
.hq-main { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 600px) { body.hq { padding: 16px 16px 28px; } }

/* ---- the top bar: logo and name, rooms, the sample chip, the clock, the look switch, who is signed in ---- */
/* the bar's room is kept before hq-page.js draws it (two rows: the name and the buttons, then the rooms), as drawn */
.hq-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 90px; }
.hq-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.hq-brand b { display: block; font-size: var(--text-lg); font-weight: var(--weight-heavy); line-height: 1.2; overflow-wrap: anywhere; }
.hq-brand small { display: block; font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; }
.hq-logo { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.cs-logo { background: var(--cs-accent); color: var(--cs-on-accent); }
.cs-logo svg { width: 24px; height: 24px; display: block; }
.hq-top .btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hq-who { font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.cs-clock { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--panel); font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cs-clock svg { width: 16px; height: 16px; flex: none; color: var(--ink-soft); }
.cs-clock[hidden], .hq-who[hidden] { display: none; }

.hq-nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.hq-nav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); font-size: 13.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.hq-nav a[href]:hover { border-color: var(--accent); }
.hq-nav a[aria-current="page"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent-strong); }
.hq-nav a[aria-disabled="true"] { cursor: default; }
@media (max-width: 600px) {
  .hq-nav a { min-height: 40px; padding: 0 12px; }
}

/* ---- a page's head: its name, a second line, then its main button on the right ---- */
.hq-head { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.hq-head h1 { margin: 0; font-size: 26px; font-weight: var(--weight-heavy); line-height: 1.2; }
.mo-biz { font-size: var(--text-lg); color: var(--ink-soft); font-weight: 600; overflow-wrap: anywhere; }
.mo-sp { flex: 1; }

/* ---- print: the paper starts light, whatever look is on the screen. The light tokens of /look/look.css and the
   light teal of this file, over the dark ones (tests/cornerstone-pages.test.mjs keeps them in step) ---- */
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    /* ground and surfaces */
    --ground: #EEF3F9;          /* the desk behind everything */
    --panel: #FFFFFF;           /* cards, the sheet, the side menu */
    --raised: #F9FBFE;
    --mist: #F3F7FC;            /* hover */
    --select: #E3EEFA;          /* the chosen row */
    --line: #BCD5F1;            /* card and panel borders (1px) */
    --line-soft: #DCE7F4;       /* dividers inside a card */
    /* words */
    --ink: #14243B;             /* main text, main buttons */
    --ink-soft: #4A5568;        /* second lines */
    --ink-faint: #5E6A7D;       /* caps labels (darkened from #8A96A8, which was too faint to read) */
    /* accent */
    --accent: var(--brand-blue);
    --accent-strong: var(--brand-navy);
    --on-accent-strong: #FFFFFF;
    --focus: var(--brand-blue);
    /* status: always shown with words */
    --status-red: #B23A3A;   --status-red-dot: #C9433F;   --status-red-bg: #FCECEB;
    --status-amber: #9A5A00; --status-amber-dot: #C98A1B; --status-amber-bg: #FFF4DE;
    --status-green: #1D7A52; --status-green-dot: #3E8E6A; --status-green-bg: #E6F4EC;
    --badge: #C9433F;           /* the red number badge */
    /* paper things: brown folders, sticky notes, the cork board */
    --kraft: #CFAD7D; --kraft-edge: #AE8A58; --kraft-ink: #3C2810; --kraft-deep: #B48E5C;
    --fold-1: #CFAD7D; --fold-2: #C9A574; --fold-3: #D6B98E; --fold-4: #C3A06F;
    --note-yellow: #FFF0A3; --note-pink: #FFDCE3; --note-blue: #CFE2FA; --note-green: #DAF1DC;
    --note-ink: #14243B;
    --cork: #F4EDE1; --cork-dot: #E6DAC6; --cork-frame: #FFFFFF; --pin: #C94C4C;
    /* the community board: cork in the light look */
    --board-face: radial-gradient(var(--cork-dot) 1px, transparent 1.2px) 0 0 / 9px 9px, var(--cork);
    --board-frame: var(--cork-frame); --board-frame-width: 6px;
    --board-shadow: 0 0 0 1px var(--office-wall-edge); --board-shadow-flat: 0 0 0 1px var(--line);
    /* notifications ("1 waiting"): red, so it reads as something to do */
    --notice-ink: #B23A3A; --notice-bg: #FCECEB; --notice-edge: #E5484D; --notice-dot: #E5484D;
    --notice-glow: none; --notice-dot-glow: none;
    /* the Main office room */
    --office-stage-top: #FBFCFE; --office-stage-bottom: #EDF2F8;
    --office-floor: #F4F7FB; --office-floor-edge: #14243B;
    --office-room: #FFFFFF; --office-room-grid: #EEF2F7; --office-room-edge: #D6E0EC;
    --office-main: #F7FAFD; --office-main-grid: #E8EEF6;
    --office-open: #FBFCFE;
    --office-glass-top: rgba(228,238,249,.55); --office-glass-bottom: rgba(214,228,245,.30);
    --office-glass-edge: rgba(91,147,214,.40); --office-glass-cap: #8FAACB;
    --office-wall-top: #FFFFFF; --office-wall-bottom: #F3F6FA; --office-wall-edge: #D6E0EC; --office-wall-cap: #14243B;
    --office-mat: #E3ECF7; --office-mat-edge: #BCD5F1; --office-mat-ink: #35679F; /* darkened from #5B93D6, too faint on the mat */
    --office-rug: #E8F0FA; --office-rug-edge: #D3E1F1;
    --office-desk: #FFFFFF; --office-desk-edge: #CBD7E6;
    --office-chair: #EEF3F9; --office-chair-edge: #D3DDEA;
    --office-monitor: #14243B; --office-monitor-rim: #2B3E5A;
    --office-cabinet: #F7F9FC; --office-cabinet-line: #CBD7E6;
    --office-table-1: #FFFFFF; --office-table-2: #F9F5EE; --office-table-3: #F0E8DA;
    --office-table-edge: #E2D6C2; --office-table-full: #E7C3BE; --office-table-rim: #E4D9C6;
    /* the Main office table: the paper-desk table shows in this look; the glass one is used only if a client picks it */
    --office-table-wood: block; --office-table-glass: none;
    --office-glass-table-1: rgba(188,213,241,.62); --office-glass-table-2: rgba(141,182,232,.34); --office-glass-table-3: rgba(188,213,241,.52);
    --office-glass-table-rim: rgba(91,147,214,.70); --office-glass-table-edge: rgba(91,147,214,.45); --office-glass-table-full: rgba(201,67,63,.55);
    --office-glass-table-shine: rgba(255,255,255,.55); --office-table-base: #B9C7D8; --office-table-base-top: #D5DFEB; --office-table-glow: rgba(91,147,214,.16);
    --office-tag: #FFFFFF; --office-tag-edge: #BCD5F1; --office-tag-open: #F9FBFE;
    /* shadows */
    --shadow-card: 0 1px 2px rgba(20,36,59,.06);
    --shadow-float: 0 8px 20px rgba(20,36,59,.12);
    --shadow-paper: 0 3px 7px rgba(20,36,59,.12);
    --shadow-pop: 0 28px 56px rgba(20,36,59,.28);
    --backdrop: rgba(20,36,59,.35);
    --cs-accent: #1E7471; --cs-on-accent: #FFFFFF; --cs-accent-soft: #E3F1F0; --accent: #1E7471;
  }
}