/* ============================================================================ assets/css/sfp-tokens.css — the SFP shared design vocabulary. PURPOSE: one plain-CSS layer (no build step, no Tailwind directives) giving every shell page the same cards, buttons, form controls, status badges and spacing rhythm, per docs/SFP_Design_Brief_v1.md. It is loaded by the FIRST line of the injected header fragment (components/header.html), so any page carrying the shared shell inherits it automatically — pages style their content with these classes instead of re-inventing local ones. ICON + LABEL RULE (the brief's accessibility rule — binding): status is NEVER conveyed by colour alone. Every .sfp-badge-* pill is structured as an inline SVG icon slot PLUS a visible text label; both are required at every use site. A badge with only a coloured dot, or only colour, is a defect. Palette (WCAG AA on their stated backgrounds), per the Point 4 Design Record v0.1 (owner-ratified 18 Jul 2026) — docs/SFP_Point4_Design_Record_v0_1.md: ROLE RULE (P2) — blue-900 #1e3a8a is for BANDS ONLY (injected header strip, credential-card band, index hero): the program speaking. blue-800 #1e40af is everything else that is blue: buttons, links, focus rings AND page headings. text-blue-700 is retired; its uses repoint to blue-800. Buttons stay blue-800 base / blue-900 hover, exactly as the rules below have always said. gray-200 #e5e7eb (borders) gray-600 #4b5563 (muted text) Status solids (deployed constants; always icon + label, never colour alone): green #16a34a amber #d97706 red #dc2626 grey #6b7280 Chip pairs: green #166534 on #dcfce7 amber #92400e on #fef3c7 red #991b1b on #fee2e2 Type (P7): system stack only — no webfont; monospace for identifiers. ========================================================================== */ :root { --sfp-blue-800: #1e40af; --sfp-blue-900: #1e3a8a; --sfp-blue-300: #93c5fd; --sfp-gray-50: #f9fafb; --sfp-gray-100: #f3f4f6; --sfp-gray-200: #e5e7eb; --sfp-gray-400: #9ca3af; --sfp-gray-600: #4b5563; --sfp-gray-900: #111827; --sfp-green-bg: #dcfce7; --sfp-green-fg: #166534; --sfp-amber-bg: #fef3c7; --sfp-amber-fg: #92400e; --sfp-red-bg: #fee2e2; --sfp-red-fg: #991b1b; --sfp-green: #16a34a; --sfp-amber: #d97706; --sfp-red: #dc2626; --sfp-grey: #6b7280; --sfp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sfp-font-mono: ui-monospace, Menlo, Consolas, monospace; --sfp-radius: .5rem; --sfp-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); --sfp-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); } /* ---- Card ---------------------------------------------------------------- */ .sfp-card { background: #fff; border: 1px solid var(--sfp-gray-200); border-radius: var(--sfp-radius); box-shadow: var(--sfp-shadow); padding: 1rem; transition: box-shadow .15s ease, border-color .15s ease; } .sfp-card:hover { box-shadow: var(--sfp-shadow-lg); border-color: var(--sfp-blue-300); } /* ---- Buttons (44px minimum touch targets) -------------------------------- */ .sfp-btn-primary, .sfp-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; /* 44px */ padding: .625rem 1.25rem; border-radius: .375rem; font-size: .875rem; font-weight: 600; line-height: 1.25rem; cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .sfp-btn-primary { background: var(--sfp-blue-800); border: 1px solid var(--sfp-blue-800); color: #fff; } .sfp-btn-primary:hover { background: var(--sfp-blue-900); border-color: var(--sfp-blue-900); } .sfp-btn-secondary { background: #fff; border: 1px solid var(--sfp-gray-200); color: var(--sfp-blue-800); } .sfp-btn-secondary:hover { background: var(--sfp-gray-50); border-color: var(--sfp-gray-400); } .sfp-btn-primary:focus-visible, .sfp-btn-secondary:focus-visible { outline: 2px solid var(--sfp-blue-800); outline-offset: 2px; } .sfp-btn-primary:disabled, .sfp-btn-secondary:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } /* ---- Forms ---------------------------------------------------------------- */ .sfp-label { display: block; font-size: .875rem; font-weight: 600; color: var(--sfp-gray-900); margin-bottom: .375rem; } .sfp-input { display: block; width: 100%; min-height: 2.75rem; /* 44px */ padding: .5rem .75rem; font-size: 1rem; color: var(--sfp-gray-900); background: #fff; border: 1px solid var(--sfp-gray-400); border-radius: .375rem; } .sfp-input::placeholder { color: var(--sfp-gray-600); } .sfp-input:focus-visible { outline: 2px solid var(--sfp-blue-800); outline-offset: 1px; border-color: var(--sfp-blue-800); } /* ---- Status badges (ICON + LABEL, never colour alone) --------------------- Structure at every use site: …Current The svg slot is sized here; the text label is mandatory. */ .sfp-badge-green, .sfp-badge-amber, .sfp-badge-red { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 9999px; /* pill */ font-size: .875rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; } .sfp-badge-green svg, .sfp-badge-amber svg, .sfp-badge-red svg { width: 1rem; height: 1rem; flex: none; } .sfp-badge-green { background: var(--sfp-green-bg); color: var(--sfp-green-fg); } .sfp-badge-amber { background: var(--sfp-amber-bg); color: var(--sfp-amber-fg); } .sfp-badge-red { background: var(--sfp-red-bg); color: var(--sfp-red-fg); } /* ---- Rhythm ---------------------------------------------------------------- */ .sfp-muted { color: var(--sfp-gray-600); font-size: .875rem; line-height: 1.25rem; } .sfp-section { margin-top: 2rem; margin-bottom: 2rem; } /* ---- Identifiers (role rule: identifiers wear blue-800; P7: monospace) ----- Colour + face + weight only; size stays with the use site so one class serves both card-scale and overlay-scale identifiers. */ .sfp-ident { color: var(--sfp-blue-800); font-family: var(--sfp-font-mono); font-weight: 700; }