/* ========================================================================== tokens.css — the Silk Matrix token layer -------------------------------------------------------------------------- WHAT THIS IS Defines the design-system values as CSS custom properties on :root. Values come from ../silk-matrix-design/HANDOFF.md section 1 (Tokens). This file DECLARES values only. It must not style any selector. LOAD ORDER — THIS FILE LOADS FIRST, BEFORE EVERY OTHER STYLESHEET. Custom properties must be defined before the rules that consume them are evaluated, and keeping it first means nothing here can accidentally win a cascade fight against a page stylesheet. WHO LOADS IT myapp/templates/main/base.html (covers 12 pages) myapp/templates/main/home.html myapp/templates/main/mapping.html myapp/templates/main/upload_status.html myapp/templates/main/login.html ...and every page in ../silk-matrix-design/before/ (the static preview). THE TWELVE ORIGINAL STYLESHEETS MUST NOT BE EDITED. base_styles, customer_styles, error_styles, home_styles, login_styles, mapping_styles, matching_styles, name_selection_styles, relationship_list_styles, review_styles, tagging_styles, upload_styles. They stay byte-identical so this branch merges cleanly. Everything the redesign changes goes in this file and in overrides.css. REMEMBER: DEBUG = False is hardcoded. Nothing here is visible in the real app until `collectstatic` runs. ========================================================================== */ /* ========================================================================== NAMING PROVENANCE — read before you add a token -------------------------------------------------------------------------- Sections 1-5 below are the 51 tokens HANDOFF.md names explicitly. Those names are the design system's; do not regularise, shorten or "improve" them. One exception, marked "ours" where it sits: the four --sm-field-*-shade tokens in section 3 (round 4, item E) are named here, like 6-8. Sections 6-8 (type, weight, space) are named HERE, in this repo. HANDOFF.md section 1.2 and 1.3 fix their VALUES but give no custom-property names, so the names were invented in session 2 and every later session inherits them. The scheme is recorded in CLAUDE.md section 8. If you disagree with a name, change it there and here together — it is ours to change, unlike 1-5. Section 9 (--sm-inset) is named by HANDOFF.md section 1.3; its responsive values are set by the media queries at the bottom of this file. ========================================================================== */ :root { /* ======================================================================== 1. COLOUR — BRAND (5) HANDOFF.md 1.1, 2.1 ------------------------------------------------------------------------ THREE BLUES, AND THE TEST THAT PICKS BETWEEN THEM: Can the user click it? YES -> --sm-brand-strong NO -> --sm-brand-deep Pressed state of an interactive surface -> --sm-brand-deep It is interactivity, not shade, not size. See HANDOFF.md 2.1 and 6.2. ======================================================================== */ /* Brand identity wherever text is NOT sitting on top of it: active nav indicator, the 3px tab underline, progress-bar fill, focus-ring colour, icon strokes, outlined-button border and label. NEVER a surface under white body text — white 14px on this is 3.8:1 and fails AA. See HANDOFF.md 2.2 and trap 6.1. */ --sm-brand: #018ac6; /* INTERACTIVE solid surfaces — things the user clicks. Primary button fill, link colour, the active page button in pagination. Never a badge (badges are static — use --sm-brand-deep). Trap 6.2. */ --sm-brand-strong: #016fa0; /* STATIC solid fills — things the user reads. Every solid badge without exception, the active step marker, counts and scores, the strong match band, and the pressed state of any interactive surface. HANDOFF.md 2.5. */ --sm-brand-deep: #015f88; /* Selected table rows, active filter pills, table header background, informational notices, classification badges. Also the Info status tint — info reuses brand, it is not a fourth hue. */ --sm-brand-tint: #e0f2fe; /* Hover fill on outlined buttons and on sidebar nav items. */ --sm-brand-wash: #f0f9ff; /* ======================================================================== 2. COLOUR — NEUTRAL (10) HANDOFF.md 1.1, 2.8, 2.14 ------------------------------------------------------------------------ One scale, ten steps. It replaces three unrelated grey systems. --sm-ink-quiet (4.8:1) is the FLOOR for text a user is expected to read. ======================================================================== */ --sm-ink: #111827; /* 17.9:1 — headings, record values, anything read to make a decision */ --sm-ink-body: #374151; /* 10.3:1 — table cell text; softer than --sm-ink across a 15-row scan */ --sm-ink-muted: #4b5563; /* 7.4:1 — labels, column headers, secondary copy, inactive tabs; also the Pending status ink */ --sm-ink-quiet: #6b7280; /* 4.8:1 — eyebrow labels, captions, helper and annotation text. THE FLOOR FOR READABLE TEXT */ --sm-ink-faint: #9ca3af; /* 2.5:1 — placeholders, disabled labels, em-dash empty cells. NEVER body text. HANDOFF.md 2.8 */ --sm-line-strong: #d1d5db; /* input borders at rest */ --sm-line: #e5e7eb; /* THE one border colour: card edges, dividers, table outline; also the Pending status border */ --sm-surface-sunk: #f3f4f6; /* row hover, deck wells, avatar fill, inert chips; also the Pending status fill and the <70 score band */ --sm-surface-page: #f9fafb; /* THE single page background — every page, no exceptions. HANDOFF.md 2.14, 4.7, 6.11 */ --sm-surface: #ffffff; /* cards, tables, menus, the sidebar */ /* ======================================================================== 3. COLOUR — FIELD TYPE (16, + 4 of ours) HANDOFF.md 1.1, 2.3 ------------------------------------------------------------------------ Four families (name / address / email / phone), four slots each. These encode WHICH KIND OF FIELD a value is. The coding is product-wide. RESERVED. Amber, steel-blue, indigo and violet belong to these four field types and to nothing else in the product — not a relationship-type badge, not a status, not a chart series, not a metric tile. There is no fifth badge colour; classification badges are all --sm-brand-tint on --sm-brand-deep (HANDOFF.md 2.4). This rule was broken once during design and caught in review. Trap 6.3. SLOT RULES: tint the card's HEADER BAND only. Never the card body; values sit on white. HANDOFF.md 4.10. shade OURS, not HANDOFF's (round 4, client review item E): one step darker than tint, for the header band of a NetSuite record (.matched-record) only, so it reads apart from the New Event Record beside it in the same hue. Halfway from tint to highlight in sRGB, so it stays inside the family and never reaches the highlight's weight. Not a fifth slot for general use: same reservation as the other four. mark the 3px left edge on the card. ink the field-type label text inside the header band. highlight the background on differing characters in an arbitration comparison. The most load-bearing colour in the system — it is what makes the diff findable. ======================================================================== */ /* Name — amber. Note: amber is SPENT here. There is no amber warning token and you may not add one; warnings are danger or the pending neutrals. HANDOFF.md 2.6. */ --sm-field-name-tint: #fbf1dc; --sm-field-name-shade: #fbeac1; /* ours: the NetSuite band */ --sm-field-name-mark: #c98a14; --sm-field-name-ink: #6f4c07; --sm-field-name-hl: #fbe3a6; /* Address — steel blue. The mark is DELIBERATELY steelier than --sm-brand so an address card never reads as an action. Do not harmonise it. */ --sm-field-addr-tint: #e8f1f8; --sm-field-addr-shade: #dceaf4; /* ours: the NetSuite band */ --sm-field-addr-mark: #2f6f96; --sm-field-addr-ink: #1f4e6b; --sm-field-addr-hl: #cfe2ef; /* Email — indigo. */ --sm-field-email-tint: #eaeefc; --sm-field-email-shade: #e0e6fa; /* ours: the NetSuite band */ --sm-field-email-mark: #4759b5; --sm-field-email-ink: #2f3d8a; --sm-field-email-hl: #d6ddf7; /* Phone — violet. */ --sm-field-phone-tint: #f4ebfd; --sm-field-phone-shade: #ede0fa; /* ours: the NetSuite band */ --sm-field-phone-mark: #7b4bb0; --sm-field-phone-ink: #56307d; --sm-field-phone-hl: #e6d5f6; /* ======================================================================== 4. COLOUR — STATUS (11) HANDOFF.md 1.1, 2.6, 2.7 ------------------------------------------------------------------------ FOUR status meanings, THREE hues. That is intentional: Success own hue COMPLETION AND NOTHING ELSE. HANDOFF.md 4.3. Danger own hue reject, destructive actions, errors, failed states Info reuses BRAND --sm-brand-tint fill + --sm-brand-deep ink, + --sm-info-border. Do not introduce a fourth hue. Pending reuses NEUTRALS --sm-surface-sunk fill + --sm-ink-muted ink + --sm-line border. Do not introduce a grey. ======================================================================== */ /* Success — completion only. Solid green NEVER carries white text (#0caf9c on white is 2.8:1), so the success badge is a tint with --sm-success-ink text. HANDOFF.md 4.3. */ --sm-success-mark: #0caf9c; --sm-success-tint: #d4f0ee; --sm-success-ink: #086b61; --sm-success-border: #a9ddd6; /* Danger — reject, destructive actions, errors, failed states. Also the strike-through colour on a rejecting card. */ --sm-danger-solid: #c0392b; --sm-danger-pressed: #9c2d21; --sm-danger-mark: #e74c3c; --sm-danger-tint: #fff5f5; --sm-danger-ink: #b03325; --sm-danger-border: #f0c8c2; /* Info / in progress — the ONLY new value in this family. Fill and ink are --sm-brand-tint and --sm-brand-deep. HANDOFF.md 2.7. */ --sm-info-border: #a8d8f0; /* ======================================================================== 5. COLOUR — SCRIM (1) · RADIUS (4) · ELEVATION (4) HANDOFF.md 1.1, 1.4, 1.5, 2.10 ======================================================================== */ /* Every overlay backdrop, all five of them. The only non-hex colour token, because it has to be transparent. NO backdrop-filter anywhere. Dropping the blur is a FIX, not a regression — someone will want to restore it. Do not. HANDOFF.md 4.11, trap 6.10. */ --sm-scrim: rgba(17, 24, 39, 0.45); --sm-radius-inline: 4px; /* inline chips, highlights, small inline affordances */ --sm-radius-control: 8px; /* buttons, inputs, dropdowns, pagination, non-pill icon buttons */ --sm-radius-card: 16px; /* cards, tables, panels, modals, notices */ --sm-radius-pill: 999px; /* badges, status pills, circular icon buttons */ /* DEPTH IS CARRIED BY THE 1px BORDER, not by shadow. If an element sits flat on the page it gets a --sm-line border and --sm-e1 at most. Shadow is only for layers that genuinely float. Do not add elevation to convey importance. HANDOFF.md 2.10. */ --sm-e1: 0 1px 2px rgba(17, 24, 39, 0.06); /* resting: cards, tables */ --sm-e2: 0 4px 12px rgba(17, 24, 39, 0.08); /* raised: menus, popovers, dropdown panels */ --sm-e3: 0 16px 32px rgba(17, 24, 39, 0.12); /* overlay: modals, toasts, the slide-over panel, the undo toast */ /* Focus ring — NEW. Every interactive control gets it; only the login page has one today. Pair it with border-color: var(--sm-brand). */ --sm-focus: 0 0 0 3px rgba(1, 138, 198, 0.25); /* ======================================================================== 6. TYPE — 8 ROLES HANDOFF.md 1.2 ------------------------------------------------------------------------ NAMES INVENTED IN THIS REPO. Values are fixed by the handoff. Pattern: --sm-type-- Roles: display · title · subtitle · body · body-strong · small · micro · mono (the handoff's own eight names, verbatim) Props: -size · -leading · -weight · -tracking · -transform · -family ONE TOKEN PER PROPERTY, not a `font:` shorthand. The shorthand cannot carry letter-spacing or text-transform, it silently resets font-family and font-stretch, and it makes it impossible for a rule to take a role's size without also taking its weight — which overrides.css needs to do constantly when it is re-pointing one declaration inside an existing rule. "leading" rather than "line-height" because --sm-line is already taken: it is the border colour. --sm-type-body-line would read as a colour. FAMILY — IBM Plex Sans for the UI, IBM Plex Mono for UUIDs and any other monospace context (round 2). Both load from Google Fonts through a in the of the five full-document templates, before this file. The Poppins + Tektur @import that was line 1 of base_styles.css and login_styles.css is gone; it was the only change allowed in either. base_styles.css still says `font-family: "Poppins"` on body — nothing loads Poppins any more, and overrides.css section 14 re-points body. "Plex Fallback" is declared at the bottom of this file: local Arial scaled to Plex's width and vertical metrics, so the display=swap window does not reflow table columns or JS-synchronised card decks. ======================================================================== */ --sm-type-family: "IBM Plex Sans", "Plex Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --sm-type-display-size: 30px; /* page titles */ --sm-type-display-leading: 36px; --sm-type-display-weight: 600; --sm-type-display-tracking: -0.4px; --sm-type-title-size: 20px; /* card and section headings */ --sm-type-title-leading: 28px; --sm-type-title-weight: 600; --sm-type-subtitle-size: 16px; /* sub-headings, card titles */ --sm-type-subtitle-leading: 24px; --sm-type-subtitle-weight: 600; --sm-type-body-size: 14px; /* the default */ --sm-type-body-leading: 20px; --sm-type-body-weight: 400; /* The arbitrated value, the Name column, anything the eye should land on first. Arbitration values are 14/600 — deliberately larger and heavier than the surrounding UI. HANDOFF.md 4.8. */ --sm-type-body-strong-size: 14px; --sm-type-body-strong-leading: 20px; --sm-type-body-strong-weight: 600; /* Badges, helper text, pagination, metadata. 13px IS THE FLOOR for anything a steward reads in order to make a decision. HANDOFF.md 2.9. */ --sm-type-small-size: 13px; --sm-type-small-leading: 18px; --sm-type-small-weight: 400; /* EYEBROW LABELS ONLY — step numbers, field-type labels, column eyebrows. Never a sentence. 11px is below the 13px reading floor and is legal here only because nothing at this size is read as prose. HANDOFF.md 2.9. */ --sm-type-micro-size: 11px; --sm-type-micro-leading: 16px; --sm-type-micro-weight: 600; --sm-type-micro-tracking: 0.06em; --sm-type-micro-transform: uppercase; /* UUIDs, source IDs, raw CSV headers. IBM Plex Mono, system stack behind it. */ --sm-type-mono-size: 13px; --sm-type-mono-leading: 18px; --sm-type-mono-weight: 400; --sm-type-mono-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ======================================================================== 7. WEIGHT — 4 replace 9 HANDOFF.md 1.2 ------------------------------------------------------------------------ NAMES INVENTED IN THIS REPO. Retired: 530, 800, bold, normal. The role weights above are the same four values; these exist for the two uses that are not a type role (buttons/tabs at 500, the logotype at 700). ======================================================================== */ --sm-weight-regular: 400; /* body and table cells */ --sm-weight-medium: 500; /* buttons and tabs */ --sm-weight-semibold: 600; /* headings, labels, emphasis */ --sm-weight-bold: 700; /* the logotype and parent rows ONLY */ /* ======================================================================== 8. SPACE — 8 steps replace 197 values HANDOFF.md 1.3 ------------------------------------------------------------------------ NAMES INVENTED IN THIS REPO. Values are fixed by the handoff. ORDINAL STEPS, not pixel values in the name: --sm-space-4 is STEP FOUR (16px), not 4px. The ordinal is used because the scale is non-linear — 4 8 12 16 24 32 48 64 — so no arithmetic name works, and because the design system already numbers its one other scale ordinally (--sm-e1, --sm-e2, --sm-e3). A name carrying the value would be a lie the moment a step moves. step 1 2 3 4 5 6 7 8 value 4px 8px 12px 16px 24px 32px 48px 64px NOTHING IS OFF-SCALE, and nothing is a percentage. The 3% / 8% / 28% / 38% paddings all go — the 28% is what pushes Upload Status 318px off-screen. If you find a percentage padding, it is a bug. Trap 6.13. Density is Standard: table row 44px (12/20 cell padding), control height 38px, card padding 20px, card gap 16px (step 4), section gap 32px (step 6), page top padding 32px (step 6). Note 44px, 38px and 20px are component sizes, not space steps — they are not on this scale. ======================================================================== */ --sm-space-1: 4px; --sm-space-2: 8px; --sm-space-3: 12px; --sm-space-4: 16px; --sm-space-5: 24px; --sm-space-6: 32px; --sm-space-7: 48px; --sm-space-8: 64px; /* ======================================================================== 9. LAYOUT — THE SHARED INSET HANDOFF.md 1.3 ------------------------------------------------------------------------ Named by the handoff. One rule replaces six values across five stylesheets (108px, 90px, 64px, 32px, 0, 0) and closes three of the ten catalogued layout bugs. Declared once; THE MEDIA QUERIES BELOW CHANGE THE VARIABLE, NOT THE RULE. A consumer writes padding-left: var(--sm-inset) once and never repeats itself in a breakpoint. This value is the >= 1024px case: 72px rail + 36px. Expanding the sidebar pushes content to 276px and the page reflows. ======================================================================== */ --sm-inset: 108px; } /* --sm-inset, 769-1023px. THE 72px RAIL IS VISIBLE IN THIS BAND — confirmed, not assumed (HANDOFF.md 4.5). This is the band that is broken today, and it is why it gets its own inset rather than joining mobile. */ @media (min-width: 769px) and (max-width: 1023px) { :root { --sm-inset: 96px; } } /* --sm-inset, <= 768px. Rail is off-canvas; the sidebar overlays with a scrim, so content runs to a plain 16px gutter (space step 4). */ @media (max-width: 768px) { :root { --sm-inset: 16px; } } /* "Plex Fallback" — the metric-matched stand-in named in --sm-type-family. While Plex downloads (display=swap), text renders in local Arial scaled to Plex's advance widths and vertical metrics, so the swap does not shift table columns, wrap a line that fits in Plex, or change the card heights the wizard decks synchronise in JS at load. Values from ../silk-matrix-design/type/silk-type.css, measured there, not guessed. An @font-face styles no selector, so it belongs in this file. */ @font-face { font-family: "Plex Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 101.0%; ascent-override: 101.5%; descent-override: 27.2%; line-gap-override: 0%; }