/* cc-shared.css — Medical design tokens + shared surface chrome. * * Ported from AIro's token model but rebranded to a CLINICAL palette: a dark navy * desk chrome with a teal accent (Medical's identity colour, #0f766e) in place of * AIro's gold. The desk shell (ui/desk/css/styles.css) and every converted surface * read these custom properties, so the whole app themes from one place. The token * NAMES are kept identical to AIro's (including the --gold-* family, repointed to * teal) so ported CSS resolves unchanged. */ @import url('/shared/cc-fonts.css'); :root { /* Popup sizing */ --popup-height: 75vh; --radius: 12px; /* Brand accent — teal (was AIro gold). --gold-* kept as aliases (→ teal) so ported styles that reference gold glows render in the clinic accent. */ --accent: #0f766e; --accent2: #5eead4; --accent-dark: #0b5850; --gold: #0f766e; --gold-light: #d5f5f0; --gold-dark: #0b5850; --gold-alpha-08: rgba(15,118,110,.08); --gold-alpha-10: rgba(15,118,110,.10); --gold-alpha-15: rgba(15,118,110,.15); --gold-alpha-20: rgba(15,118,110,.20); --gold-alpha-25: rgba(15,118,110,.25); --gold-alpha-30: rgba(15,118,110,.30); /* Dark chrome (desk bar, tab pills, modals) */ --navy: #16233b; --navy-mid: #22314f; --navy-deep: #1a2942; --navy-hover: #22314f; --navy-light: #e8ecf4; /* Theme tokens the desk shell consumes */ --bg: #0f1626; --surface: #1f2d49; --surface2: #182339; --text: #e6ecf5; --text-dim: rgba(230,236,245,0.55); /* Neutrals / semantics */ --white: #ffffff; --slate: #4a5568; --slate-light: #f7f9fc; --green: #1a6b3c; --green-light: #e6f4ed; --green-bright: #54ee92; --red: #b91c1c; --red-light: #fee2e2; --red-bright: #ff6060; --amber: #92400e; --amber-light: #fef3c7; --blue: #1e40af; --blue-light: #dbeafe; /* Structure */ --border: rgba(255,255,255,0.10); --border-light: rgba(255,255,255,0.12); /* Alpha helpers referenced by the ported shell */ --white-alpha-07: rgba(255,255,255,.07); --white-alpha-08: rgba(255,255,255,.08); --white-alpha-10: rgba(255,255,255,.10); --white-alpha-12: rgba(255,255,255,.12); --white-alpha-20: rgba(255,255,255,.20); --red-pink-alpha-20: rgba(255,80,80,.20); --black-alpha-50: rgba(0,0,0,.50); --black-alpha-70: rgba(0,0,0,.70); /* Typography — OS system stacks (no web fonts; see cc-fonts.css) */ --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-heading: Georgia, 'Times New Roman', serif; --font-mono: 'Courier New', Courier, monospace; --font-mono-jetbrains: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; /* Desk bar height (referenced with a fallback by the shell) */ --bar-h: 48px; } /* ── Shared surface chrome (light content surfaces embedded as desk tabs) ── Converted surfaces set class="nx-surface" on to inherit a consistent light background, system font, and header/button vocabulary. */ .nx-surface { margin: 0; font-family: var(--font-body); color: #1c2330; background: #f4f6f8; } .nx-surface .nx-header { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid #e3e8ee; position: sticky; top: 0; z-index: 10; } .nx-surface .nx-header h1 { font-size: 1.05rem; margin: 0; color: var(--accent-dark); font-weight: 700; } .nx-surface .nx-header .nx-spacer { flex: 1; } .nx-surface .nx-who { font-size: .8rem; color: #667; } .nx-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: #fff; font: 600 .85rem/1 var(--font-body); cursor: pointer; transition: opacity .15s, background .15s, color .15s; } .nx-btn:hover { opacity: .9; } .nx-btn.secondary { background: #fff; color: var(--accent-dark); } .nx-btn.ghost { background: transparent; color: #556; border-color: #cbd2d9; } .nx-btn:disabled { opacity: .55; cursor: default; } /* Hard-block banner (missing required data / failed load) — CLAUDE.md §10. */ .nx-block { margin: 1rem; padding: .8rem 1rem; border-radius: 8px; background: #fff4f4; border: 1px solid #f3c2c2; color: #a12626; font-size: .85rem; }