/* ============================================================================= * JVK Capital — Apple Human Interface Guidelines design tokens + components * * Loaded once from the page . All admin (Command Center) and investor * (portal) surfaces share these primitives so the product feels coherent. * * Principles: Clarity · Deference · Depth. * Source of truth for every metric: tabular numerals, semantic colors, hairline * separators (not drop shadows), continuous corners, materials over fills. * ============================================================================= */ :root { /* — Typography ——————————————————————————————————————————————— */ --hig-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --hig-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* iOS / macOS type scale (rem from 16px base) */ --hig-large-title: 2.125rem; /* 34 */ --hig-title-1: 1.75rem; /* 28 */ --hig-title-2: 1.375rem; /* 22 */ --hig-title-3: 1.25rem; /* 20 */ --hig-headline: 1.0625rem; /* 17 semibold */ --hig-body: 1.0625rem; /* 17 */ --hig-callout: 1rem; /* 16 */ --hig-subhead: 0.9375rem; /* 15 */ --hig-footnote: 0.8125rem; /* 13 */ --hig-caption: 0.75rem; /* 12 */ --hig-caption-2: 0.6875rem; /* 11 */ --hig-tracking-tight: -0.01em; --hig-tracking-default: 0; --hig-tracking-wide: 0.02em; /* — 8-pt spacing scale ——————————————————————————————————————— */ --hig-s-0: 2px; --hig-s-1: 4px; --hig-s-2: 8px; --hig-s-3: 12px; --hig-s-4: 16px; --hig-s-5: 24px; --hig-s-6: 32px; --hig-s-7: 48px; --hig-s-8: 64px; /* — Radii (continuous corners) —————————————————————————————— */ --hig-r-control: 10px; --hig-r-card: 16px; --hig-r-sheet: 20px; --hig-r-pill: 999px; /* — Motion ————————————————————————————————————————————————— */ --hig-ease-standard: cubic-bezier(.4, 0, .2, 1); --hig-ease-emphasized: cubic-bezier(.2, 0, 0, 1); --hig-dur-fast: 120ms; --hig-dur: 220ms; --hig-dur-slow: 320ms; /* — Elevation (uses background layering, not heavy shadows) ——— */ --hig-shadow-sheet: 0 24px 48px -16px rgba(0, 0, 0, .55), 0 4px 12px -2px rgba(0, 0, 0, .35); /* — Status semantic colors (used sparingly as accents, never fills) — */ --hig-green: #34c759; --hig-green-soft: rgba(52, 199, 89, .14); --hig-blue: #0a84ff; --hig-blue-soft: rgba(10, 132, 255, .16); --hig-yellow: #ffd60a; --hig-yellow-soft: rgba(255, 214, 10, .16); --hig-orange: #ff9f0a; --hig-orange-soft: rgba(255, 159, 10, .16); --hig-red: #ff453a; --hig-red-soft: rgba(255, 69, 58, .14); --hig-purple: #bf5af2; --hig-purple-soft: rgba(191, 90, 242, .16); /* Returns / P&L (only use these two for monetary deltas) */ --hig-up: var(--hig-green); --hig-down: var(--hig-red); } /* — Dark mode (default to match the existing chrome) ——————————— */ :root, :root[data-theme="dark"] { --hig-bg: #09090b; --hig-bg-elevated: #111114; --hig-bg-grouped: #1a1a1d; --hig-bg-tertiary: #232327; --hig-separator: rgba(255, 255, 255, .08); --hig-separator-strong: rgba(255, 255, 255, .14); --hig-label: #fafafa; --hig-label-secondary: rgba(235, 235, 245, .60); --hig-label-tertiary: rgba(235, 235, 245, .30); --hig-fill-thin: rgba(255, 255, 255, .04); --hig-fill: rgba(255, 255, 255, .08); --hig-fill-strong: rgba(255, 255, 255, .14); --hig-material-thin: rgba(20, 20, 22, .55); --hig-material-regular: rgba(20, 20, 22, .72); --hig-material-thick: rgba(20, 20, 22, .88); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --hig-bg: #f5f5f7; --hig-bg-elevated: #ffffff; --hig-bg-grouped: #f2f2f7; --hig-bg-tertiary: #e5e5ea; --hig-separator: rgba(60, 60, 67, .12); --hig-separator-strong: rgba(60, 60, 67, .24); --hig-label: #1d1d1f; --hig-label-secondary: rgba(60, 60, 67, .60); --hig-label-tertiary: rgba(60, 60, 67, .30); --hig-fill-thin: rgba(0, 0, 0, .03); --hig-fill: rgba(0, 0, 0, .06); --hig-fill-strong: rgba(0, 0, 0, .10); --hig-material-thin: rgba(255, 255, 255, .55); --hig-material-regular: rgba(255, 255, 255, .72); --hig-material-thick: rgba(255, 255, 255, .88); } } /* — Universal niceties ——————————————————————————————————————— */ .hig { font-family: var(--hig-font); color: var(--hig-label); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hig-num, .hig-card .hig-kpi-value, .hig-card td, .hig-list td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; } /* — Typography helpers ——————————————————————————————————————— */ .hig-text-large-title { font-size: var(--hig-large-title); font-weight: 700; letter-spacing: var(--hig-tracking-tight); line-height: 1.2; } .hig-text-title-1 { font-size: var(--hig-title-1); font-weight: 600; letter-spacing: var(--hig-tracking-tight); line-height: 1.25; } .hig-text-title-2 { font-size: var(--hig-title-2); font-weight: 600; line-height: 1.3; } .hig-text-title-3 { font-size: var(--hig-title-3); font-weight: 600; line-height: 1.35; } .hig-text-headline { font-size: var(--hig-headline); font-weight: 600; line-height: 1.4; } .hig-text-body { font-size: var(--hig-body); font-weight: 400; line-height: 1.45; } .hig-text-callout { font-size: var(--hig-callout); font-weight: 400; line-height: 1.4; } .hig-text-subhead { font-size: var(--hig-subhead); font-weight: 400; line-height: 1.4; color: var(--hig-label-secondary); } .hig-text-footnote { font-size: var(--hig-footnote); font-weight: 400; line-height: 1.35; color: var(--hig-label-secondary); } .hig-text-caption { font-size: var(--hig-caption); font-weight: 400; line-height: 1.3; color: var(--hig-label-tertiary); text-transform: uppercase; letter-spacing: var(--hig-tracking-wide); } /* — Materials (vibrancy) ————————————————————————————————————— */ .hig-material-thin { background: var(--hig-material-thin); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .hig-material-regular { background: var(--hig-material-regular); backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); } .hig-material-thick { background: var(--hig-material-thick); backdrop-filter: saturate(180%) blur(40px); -webkit-backdrop-filter: saturate(180%) blur(40px); } /* — Cards & lists ———————————————————————————————————————————— */ .hig-card { background: var(--hig-bg-elevated); border: 1px solid var(--hig-separator); border-radius: var(--hig-r-card); padding: var(--hig-s-5); color: var(--hig-label); } .hig-card + .hig-card { margin-top: var(--hig-s-4); } .hig-card.is-grouped { padding: 0; overflow: hidden; } .hig-card.is-padless { padding: 0; } .hig-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hig-s-3); margin-bottom: var(--hig-s-4); } .hig-card-title h3 { margin: 0; font-size: var(--hig-headline); font-weight: 600; letter-spacing: var(--hig-tracking-tight); } .hig-card-title .hig-text-footnote { margin: 0; } /* KPI tile (used in Fund Pulse rail) */ .hig-kpi { display: flex; flex-direction: column; gap: var(--hig-s-2); padding: var(--hig-s-4) var(--hig-s-5); min-width: 184px; flex: 1 1 184px; border-right: 1px solid var(--hig-separator); } .hig-kpi:last-child { border-right: 0; } .hig-kpi-label { font-size: var(--hig-caption); font-weight: 600; color: var(--hig-label-tertiary); text-transform: uppercase; letter-spacing: var(--hig-tracking-wide); } .hig-kpi-value { font-size: var(--hig-title-1); font-weight: 600; letter-spacing: var(--hig-tracking-tight); color: var(--hig-label); line-height: 1.1; } .hig-kpi-sub { font-size: var(--hig-footnote); color: var(--hig-label-secondary); display: flex; align-items: center; gap: var(--hig-s-1); } .hig-kpi-sub.is-up { color: var(--hig-up); } .hig-kpi-sub.is-down { color: var(--hig-down); } /* Inset grouped list (Agent Operating Status, Sheet Map) */ .hig-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .hig-list > li, .hig-list-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--hig-s-3); padding: var(--hig-s-3) var(--hig-s-5); min-height: 56px; border-top: 1px solid var(--hig-separator); transition: background-color var(--hig-dur-fast) var(--hig-ease-standard); } .hig-list > li:first-child, .hig-list-row:first-child { border-top: 0; } .hig-list > li.is-tappable, .hig-list-row.is-tappable { cursor: pointer; } .hig-list > li.is-tappable:hover, .hig-list-row.is-tappable:hover { background: var(--hig-fill-thin); } .hig-list-leading { width: 28px; height: 28px; display: grid; place-items: center; color: var(--hig-label-secondary); } .hig-list-body { min-width: 0; } .hig-list-title { font-size: var(--hig-headline); font-weight: 600; color: var(--hig-label); margin: 0; } .hig-list-subtitle { font-size: var(--hig-footnote); color: var(--hig-label-secondary); margin: 2px 0 0; } .hig-list-trailing { display: flex; align-items: center; gap: var(--hig-s-3); color: var(--hig-label-tertiary); } .hig-list-chevron { width: 12px; height: 12px; opacity: .5; } /* — Status pill ———————————————————————————————————————————— */ .hig-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--hig-r-pill); font-size: var(--hig-caption); font-weight: 600; letter-spacing: var(--hig-tracking-wide); text-transform: uppercase; background: var(--hig-fill); color: var(--hig-label-secondary); white-space: nowrap; } .hig-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } .hig-status-pill.is-healthy { background: var(--hig-green-soft); color: var(--hig-green); } .hig-status-pill.is-running { background: var(--hig-blue-soft); color: var(--hig-blue); } .hig-status-pill.is-stale { background: var(--hig-yellow-soft); color: var(--hig-yellow); } .hig-status-pill.is-degraded { background: var(--hig-orange-soft); color: var(--hig-orange); } .hig-status-pill.is-fail { background: var(--hig-red-soft); color: var(--hig-red); } .hig-status-pill.is-disabled { background: var(--hig-fill); color: var(--hig-label-tertiary); } /* Soft "drift" badge for sheet round-trip warnings */ .hig-drift-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--hig-r-pill); font-size: var(--hig-caption-2); font-weight: 600; background: var(--hig-yellow-soft); color: var(--hig-yellow); } /* — Segmented control ———————————————————————————————————————— */ .hig-segmented { display: inline-flex; padding: 2px; background: var(--hig-fill); border-radius: var(--hig-r-control); gap: 0; } .hig-segmented button { appearance: none; background: transparent; border: 0; color: var(--hig-label-secondary); font: inherit; font-size: var(--hig-subhead); font-weight: 500; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background-color var(--hig-dur-fast) var(--hig-ease-standard), color var(--hig-dur-fast) var(--hig-ease-standard); min-height: 30px; } .hig-segmented button[aria-selected="true"], .hig-segmented button.is-active { background: var(--hig-bg-elevated); color: var(--hig-label); box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 0 0 1px var(--hig-separator); } .hig-segmented button:focus-visible { outline: 2px solid var(--hig-blue); outline-offset: 2px; } /* — Buttons ————————————————————————————————————————————————— */ .hig-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--hig-s-2); min-height: 36px; padding: 0 var(--hig-s-4); border: 1px solid var(--hig-separator); border-radius: var(--hig-r-control); background: var(--hig-fill); color: var(--hig-label); font: 600 var(--hig-subhead)/1 var(--hig-font); cursor: pointer; transition: background-color var(--hig-dur-fast) var(--hig-ease-standard), transform var(--hig-dur-fast) var(--hig-ease-standard); } .hig-button:hover { background: var(--hig-fill-strong); } .hig-button:active { transform: scale(.98); } .hig-button.is-primary { background: var(--hig-blue); color: #fff; border-color: transparent; } .hig-button.is-primary:hover { background: #2891ff; } .hig-button.is-ghost { background: transparent; } .hig-button.is-danger { color: var(--hig-red); } .hig-button:disabled { opacity: .4; cursor: not-allowed; } .hig-button:focus-visible { outline: 2px solid var(--hig-blue); outline-offset: 2px; } /* Icon-only round button (Run Now in agent rows) */ .hig-icon-button { width: 32px; height: 32px; border-radius: var(--hig-r-pill); display: grid; place-items: center; background: var(--hig-fill); color: var(--hig-label-secondary); border: 0; cursor: pointer; transition: background-color var(--hig-dur-fast) var(--hig-ease-standard); } .hig-icon-button:hover { background: var(--hig-fill-strong); color: var(--hig-label); } .hig-icon-button:focus-visible { outline: 2px solid var(--hig-blue); outline-offset: 2px; } /* — Form controls ———————————————————————————————————————————— */ .hig-field { display: flex; flex-direction: column; gap: 6px; } .hig-field-label { font-size: var(--hig-footnote); font-weight: 600; color: var(--hig-label-secondary); } .hig-input, .hig-textarea, .hig-select { appearance: none; font: 400 var(--hig-body)/1.4 var(--hig-font); color: var(--hig-label); background: var(--hig-bg-grouped); border: 1px solid var(--hig-separator); border-radius: var(--hig-r-control); padding: 10px 12px; width: 100%; min-height: 38px; transition: border-color var(--hig-dur-fast) var(--hig-ease-standard); } .hig-textarea { min-height: 120px; resize: vertical; font: 400 var(--hig-subhead)/1.5 var(--hig-font); } .hig-input:focus, .hig-textarea:focus, .hig-select:focus { outline: 0; border-color: var(--hig-blue); box-shadow: 0 0 0 3px rgba(10, 132, 255, .25); } /* Toggle switch */ .hig-switch { --w: 44px; --h: 26px; position: relative; width: var(--w); height: var(--h); display: inline-block; flex: 0 0 var(--w); } .hig-switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; margin: 0; } .hig-switch-track { position: absolute; inset: 0; background: var(--hig-fill-strong); border-radius: var(--hig-r-pill); transition: background-color var(--hig-dur) var(--hig-ease-standard); } .hig-switch-thumb { position: absolute; top: 2px; left: 2px; width: calc(var(--h) - 4px); height: calc(var(--h) - 4px); background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform var(--hig-dur) var(--hig-ease-standard); } .hig-switch input:checked ~ .hig-switch-track { background: var(--hig-green); } .hig-switch input:checked ~ .hig-switch-thumb { transform: translateX(calc(var(--w) - var(--h))); } .hig-switch input:focus-visible ~ .hig-switch-track { box-shadow: 0 0 0 3px rgba(10, 132, 255, .35); } /* Tag chip */ .hig-chip { display: inline-flex; align-items: center; padding: 3px 10px; background: var(--hig-fill); color: var(--hig-label-secondary); border-radius: var(--hig-r-pill); font-size: var(--hig-caption); font-weight: 500; } .hig-chip.is-ticker { font-family: var(--hig-font-mono); letter-spacing: .03em; color: var(--hig-label); background: var(--hig-blue-soft); } /* — Modal sheet (Schedule Editor) ————————————————————————————— * CRITICAL: The default state is `