/* estimator-v4 kit — the APP's semantic tokens (copied from sj-app apps/ims/src/app/globals.css @ 62cc0e9e, :root L45-270, teal L285-290, :root[data-palette] L325-335, .dark L348-419, .dark teal L428-434, .dark[data-palette] L472-480, @theme radii L817-820). Brass = default = NO data-palette attribute; teal = . Dark = . Use ONLY the --color-* / --sp-* / --ctl-h / --radius-* names below in mockups (never a hex). */ @font-face { font-family: "IBM Plex Sans"; src: url("../../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } :root { --p-canvas: #f4f1ea; --p-surface: #fdfcf8; --p-ink: #1c1e22; --p-accent: #8a6216; --color-bg: var(--p-canvas); --color-bg-elevated: var(--p-surface); --color-surface: var(--p-surface); --color-bg-muted: color-mix(in srgb, var(--p-canvas) 96%, var(--p-ink)); --color-bg-hover: color-mix(in srgb, var(--p-canvas) 94%, var(--p-ink)); --color-bg-raised: color-mix(in srgb, var(--p-canvas) 92%, var(--p-ink)); --color-border: color-mix(in srgb, var(--p-ink) 12%, transparent); --color-border-strong: color-mix(in srgb, var(--p-ink) 24%, transparent); --color-fg: var(--p-ink); --color-fg-muted: color-mix(in srgb, var(--p-ink) 72%, transparent); --color-fg-faint: color-mix(in srgb, var(--p-ink) 52%, transparent); --color-accent: var(--p-accent); --color-accent-hover: color-mix(in srgb, var(--p-accent) 88%, #000); --color-accent-soft: color-mix(in srgb, var(--p-accent) 12%, transparent); --color-accent-fg: #ffffff; --color-danger: #b42318; --color-danger-soft: color-mix(in srgb, #b42318 12%, transparent); --color-on-danger: #ffffff; --color-success: #1f7a4d; --color-success-soft: color-mix(in srgb, #1f7a4d 12%, transparent); --color-info: #0369a1; --color-info-soft: color-mix(in srgb, #0369a1 12%, transparent); --color-warn: #b7791f; --color-warning: #b7791f; --color-warning-soft: color-mix(in srgb, #b7791f 12%, transparent); --color-scrim: color-mix(in srgb, #000 52%, transparent); --color-input-bg: #ffffff; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.11), 0 3px 8px rgba(0, 0, 0, 0.07); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.13), 0 8px 24px rgba(0, 0, 0, 0.11); --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.32); --inset-highlight: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); --shadow-card: var(--shadow-1); --shadow-overlay: var(--shadow-3); /* sizes (density is locked at compact in the app) */ --row-h: 28px; --card-py: 8px; --card-px: 12px; --input-h: 30px; --gap-card: 12px; --topbar-h: 48px; --table-body-fs: 13px; --table-cell-py: 6px; --table-head-h: 36px; --table-head-fs: 11px; --table-row-h: 44px; --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --ctl-h: 28px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --fs-hint: 11px; --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* codes + numbers only */ /* primary button: brass = brushed-gold gradient (longhands only, never the background shorthand) */ --btn-deep: #b8893a; --btn-mid: #d4aa55; --btn-highlight: #ecd28f; --btn-grad: linear-gradient(135deg, var(--btn-deep) 0%, var(--btn-mid) 32%, var(--btn-highlight) 58%, var(--btn-mid) 78%, var(--btn-deep) 100%); --btn-grad-size: 180% 180%; --btn-grad-position: 50% 50%; --btn-grad-hover-position: 50% 70%; --primary-bg-image: var(--btn-grad); --primary-bg-color: transparent; --primary-fg: #1c1e22; --primary-edge: inset 0 1px 0 rgba(255, 255, 255, 0.55); --primary-hover-bg-image: var(--btn-grad); --primary-hover-bg-color: transparent; } @media screen and (min-width: 768px) { :root { --table-row-h: 24px; --table-head-h: 28px; } } :root[data-palette="teal"] { --p-canvas: #eef2f2; --p-surface: #ffffff; --p-ink: #14201f; --p-accent: #0e7682; } :root[data-palette] { --primary-bg-image: none; --primary-bg-color: var(--color-accent); --primary-fg: var(--color-accent-fg); --primary-edge: var(--inset-highlight); --primary-hover-bg-image: none; --primary-hover-bg-color: var(--color-accent-hover); --btn-grad-size: auto; --btn-grad-position: 0% 0%; --btn-grad-hover-position: 0% 0%; } .dark { color-scheme: dark; --p-canvas: #15161a; --p-surface: #1e2025; --p-ink: #ebe8e0; --p-accent: #d4a84b; --color-bg: var(--p-canvas); --color-bg-elevated: var(--p-surface); --color-surface: var(--p-surface); --color-bg-muted: color-mix(in srgb, var(--p-surface) 96%, #fff); --color-bg-raised: color-mix(in srgb, var(--p-surface) 92%, #fff); --color-bg-hover: color-mix(in srgb, var(--p-surface) 90%, #fff); --color-border: color-mix(in srgb, var(--p-ink) 14%, transparent); --color-border-strong: color-mix(in srgb, var(--p-ink) 26%, transparent); --color-fg: var(--p-ink); --color-fg-muted: color-mix(in srgb, var(--p-ink) 72%, transparent); --color-fg-faint: color-mix(in srgb, var(--p-ink) 52%, transparent); --color-accent: var(--p-accent); --color-accent-hover: color-mix(in srgb, var(--p-accent) 88%, #fff); --color-accent-soft: color-mix(in srgb, var(--p-accent) 14%, transparent); --color-accent-fg: #1c1e22; --color-danger: #f26d6d; --color-danger-soft: color-mix(in srgb, #f26d6d 14%, transparent); --color-on-danger: var(--p-canvas); --color-success: #3ecf8e; --color-success-soft: color-mix(in srgb, #3ecf8e 14%, transparent); --color-info: #38bdf8; --color-info-soft: color-mix(in srgb, #38bdf8 14%, transparent); --color-warn: #f0b94a; --color-warning: #f0b94a; --color-warning-soft: color-mix(in srgb, #f0b94a 14%, transparent); --color-scrim: color-mix(in srgb, #000 62%, transparent); --color-input-bg: rgba(255, 255, 255, 0.03); --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.28); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.62), 0 16px 44px rgba(0, 0, 0, 0.34); --shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 48px rgba(0, 0, 0, 0.55); --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-card: var(--shadow-1); --shadow-overlay: var(--shadow-3); --btn-deep: #b1873a; --btn-mid: #c9a24a; --btn-highlight: #e6cf8a; --primary-fg: #1c1e22; --primary-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .dark[data-palette="teal"] { --p-canvas: #101617; --p-surface: #172022; --p-ink: #e4ebea; --p-accent: #3aa7b0; } .dark[data-palette] { --color-accent-fg: var(--p-canvas); --primary-bg-image: none; --primary-bg-color: var(--color-accent); --primary-fg: var(--color-accent-fg); --primary-edge: var(--inset-highlight); --primary-hover-bg-image: none; --primary-hover-bg-color: var(--color-accent-hover); } /* base + the few primitives every mockup needs */ html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-sans); font-size: 14px; } .num, .code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .btn { height: var(--ctl-h); padding: 0 var(--sp-4); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background-color: var(--color-bg-elevated); color: var(--color-fg); font: inherit; cursor: pointer; } .btn:hover { background-color: var(--color-bg-hover); } .btn-primary { border-color: transparent; color: var(--primary-fg); box-shadow: var(--primary-edge); background-image: var(--primary-bg-image); background-color: var(--primary-bg-color); background-size: var(--btn-grad-size); background-position: var(--btn-grad-position); } .btn-primary:hover { background-image: var(--primary-hover-bg-image); background-color: var(--primary-hover-bg-color); background-position: var(--btn-grad-hover-position); } .input { height: var(--ctl-h); padding: 0 var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-input-bg); color: var(--color-fg); font: inherit; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }