76bcb04c8f
.text-input, .btn-outline, .btn-outline-ink were using bg-canvas which now resolves to the tinted #f3f5f8 instead of white, making inputs and Cancel/outlined buttons visually gritty on white paper cards. Switching all three to bg-paper restores white surfaces inside cards in light mode. Dark mode unaffected (canvas/paper both resolve correctly there). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
151 lines
4.2 KiB
CSS
151 lines
4.2 KiB
CSS
@import './fonts.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* Light mode — default */
|
|
:root {
|
|
--color-canvas: #f3f5f8;
|
|
--color-paper: #ffffff;
|
|
--color-cloud: #f7f7f7;
|
|
--color-fog: #e8e8e8;
|
|
--color-steel: #c2c2c2;
|
|
--color-hairline: #e8e8e8;
|
|
--color-ink: #1a1a1a;
|
|
--color-ink-soft: #292929;
|
|
--color-ink-deep: #000000;
|
|
--color-ink-on: #ffffff;
|
|
--color-charcoal: #3d3d3d;
|
|
--color-graphite: #636363;
|
|
/* Semantic status tokens — WCAG AA on canvas and slab surfaces */
|
|
--color-success: #16a34a;
|
|
--color-success-soft: #dcfce7;
|
|
--color-warn: #d97706;
|
|
--color-warn-soft: #fef3c7;
|
|
}
|
|
|
|
/* Dark mode overrides */
|
|
.dark {
|
|
--color-canvas: #111827;
|
|
--color-paper: #1f2937;
|
|
--color-cloud: #1f2937;
|
|
--color-fog: #374151;
|
|
--color-steel: #4b5563;
|
|
--color-hairline: #4b5563;
|
|
--color-ink: #f9fafb;
|
|
--color-ink-soft: #e5e7eb;
|
|
--color-ink-deep: #ffffff;
|
|
--color-ink-on: #111827;
|
|
--color-charcoal: #d1d5db;
|
|
--color-graphite: #9ca3af;
|
|
/* Semantic status tokens — dark variants, WCAG AA on #111827 slab */
|
|
--color-success: #22c55e;
|
|
--color-success-soft: #14532d;
|
|
--color-warn: #f59e0b;
|
|
--color-warn-soft: #78350f;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
@apply bg-canvas text-ink font-sans antialiased;
|
|
font-size: 16px;
|
|
line-height: 1.4;
|
|
font-feature-settings: 'cv11', 'ss01';
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
line-height: 1.1;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/*
|
|
* Terminal-SOC brutalist component recipes.
|
|
* border-radius: 0 everywhere except .badge-pill-* (status pills only).
|
|
* No transition-* on any interactive surface.
|
|
*/
|
|
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center gap-xs bg-primary text-white uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
|
|
}
|
|
.btn-primary:hover {
|
|
@apply bg-primary-deep;
|
|
}
|
|
.btn-primary:disabled {
|
|
@apply bg-steel cursor-not-allowed;
|
|
}
|
|
|
|
/* btn-ink: fixed dark slab — does not invert in dark mode */
|
|
.btn-ink {
|
|
@apply inline-flex items-center justify-center gap-xs bg-slab text-slab-text uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
|
|
}
|
|
.btn-ink:hover {
|
|
@apply opacity-80;
|
|
}
|
|
.btn-ink:disabled {
|
|
@apply bg-steel cursor-not-allowed;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply inline-flex items-center justify-center gap-xs bg-paper text-primary border border-primary uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
|
|
}
|
|
.btn-outline:hover {
|
|
@apply bg-primary-soft;
|
|
}
|
|
.btn-outline:disabled {
|
|
@apply border-steel text-steel cursor-not-allowed;
|
|
}
|
|
|
|
.btn-outline-ink {
|
|
@apply inline-flex items-center justify-center gap-xs bg-paper text-ink border border-ink uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
|
|
}
|
|
.btn-outline-ink:hover {
|
|
@apply bg-cloud;
|
|
}
|
|
|
|
.btn-text-link {
|
|
@apply inline-flex items-center gap-xxs text-primary font-medium text-[16px] leading-[1.4] underline-offset-2 hover:underline;
|
|
}
|
|
|
|
.text-input {
|
|
@apply block w-full bg-paper text-ink rounded-none border border-steel px-md py-sm h-11 text-[16px] leading-[1.4] focus:outline-none focus:border-primary;
|
|
}
|
|
|
|
/* Panel / card — hairline border, no shadow, no radius */
|
|
.card-product {
|
|
@apply bg-paper border border-hairline rounded-none p-md;
|
|
}
|
|
|
|
/* Fixed modal backdrop — must not use themed ink (inverts in dark mode) */
|
|
.modal-backdrop {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/* Status pill badges — ONLY surfaces with rounded-pill */
|
|
.badge-pill-ink {
|
|
@apply inline-flex items-center bg-ink text-white rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
|
|
}
|
|
|
|
.badge-pill-outline {
|
|
@apply inline-flex items-center bg-canvas text-ink border border-ink rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
|
|
}
|
|
|
|
/* MITRE technique tags — angular, not pills */
|
|
.tag-mitre {
|
|
@apply inline-flex items-center bg-cloud text-ink border border-hairline rounded-none px-2 py-[2px] font-mono text-[12px] leading-[1.33];
|
|
}
|
|
}
|