/* ============================================================================ Kickstand CRM — Design Tokens (from the 2026-07 Claude Design handoff) ---------------------------------------------------------------------------- Single source of truth for the "non-photo utility page" design system (Tax Analysis is the first consumer). Reference every value via var(--ks-*); never hard-code a hex in a component — change a value here (or through the Customizer → Design Tokens editor, which overrides these at runtime via JSFolder/ks-tokens.js + localStorage "KSTokens") and it propagates everywhere. NOTE: --ks-scale is NOT defined here — that variable belongs to layout-scale.js (app-wide canvas scaling) and must stay untouched. ============================================================================ */ :root { /* --- Brand anchors (verbatim from brand guide) ------------------------- */ --ks-blue: #0C3B5D; /* primary brand navy */ --ks-green: #5BBA47; /* primary brand green */ --ks-grey: #414141; --ks-black: #262626; /* --- Brand extensions (same hues, deeper / softer) --------------------- */ --ks-blue-deep: #062840; --ks-blue-mid: #1F5378; --ks-blue-soft: #3D7AA0; --ks-green-deep: #3F8A30; --ks-green-soft: #7CCB6A; /* --- Sky family — the "fades to sky" backdrop convention --------------- */ --ks-sky-50: #F4F8FB; --ks-sky-100: #E8F1F7; --ks-sky-200: #D2E2EE; --ks-sky-300: #B5CFE0; --ks-sky-400: #8FB4CC; /* --- Sun / warmth — "sunshine, adventure" accent ----------------------- */ --ks-sun: #E8A65A; --ks-sun-soft: #F4C896; --ks-sun-deep: #C97F3A; /* --- Sage / clay — outdoor secondary tones ----------------------------- */ --ks-sage: #A8C8A0; --ks-sage-deep: #7DA374; --ks-clay: #D4A574; --ks-clay-soft: #EAC9A2; /* --- Surfaces / neutrals ----------------------------------------------- */ --ks-paper: #FBFAF6; /* warm off-white — primary card surface */ --ks-paper-cool: #F5F8FB; /* cool surface — matches sky family */ --ks-canvas: #FFFFFF; --ks-line: #E5E8EC; --ks-line-soft: #EEF1F4; --ks-mute: #7A8590; --ks-ink: #262626; --ks-ink-soft: #414141; --ks-ink-light: #5A6671; /* --- Semantic ---------------------------------------------------------- */ --ks-success: #5BBA47; --ks-success-bg: #EAF6E6; --ks-warning: #E8A65A; --ks-warning-bg: #FBEFDD; --ks-danger: #C2553B; --ks-danger-bg: #F8E5DF; --ks-info: #1F5378; --ks-info-bg: #E8F1F7; /* --- Scenario column accents (Tax Analysis worksheet) ------------------- One per column position, cycling 1→6. Swap any of these (e.g. the tertiary orange, --ks-scn-3) and every column header / accent follows. */ --ks-scn-1: #0C3B5D; --ks-scn-2: #5BBA47; --ks-scn-3: #E8A65A; --ks-scn-4: #7DA374; --ks-scn-5: #C97F3A; --ks-scn-6: #1F5378; /* --- Worksheet section band tint (spec: WIP — sky is the default; the candidates sage #DCE8D5 / slate #DDE3EA / clay #ECD6CE are one-swap) ---- */ --ks-band-bg: #E8F1F7; --ks-band-ink: #1F5378; --ks-band-border: #D2E2EE; /* --- Typography -------------------------------------------------------- */ --ks-font-display: "Newsreader", "Source Serif 4", Georgia, serif; --ks-font-body: Inter, "Helvetica Neue", system-ui, -apple-system, sans-serif; --ks-font-mono: "JetBrains Mono", Consolas, ui-monospace, "Menlo", monospace; /* Type ramp — size / line-height / weight / tracking. */ --ks-d3-size: 40px; --ks-d3-lh: 1.1; --ks-d3-weight: 400; --ks-d3-tracking: -0.015em; --ks-h1-size: 32px; --ks-h1-lh: 1.2; --ks-h1-weight: 600; --ks-h1-tracking: -0.01em; --ks-h2-size: 24px; --ks-h2-lh: 1.25; --ks-h2-weight: 600; --ks-h2-tracking: -0.005em; --ks-h3-size: 18px; --ks-h3-lh: 1.3; --ks-h3-weight: 600; --ks-body-size: 16px; --ks-body-lh: 1.5; --ks-body-weight: 400; --ks-body-s-size: 14px; --ks-body-s-lh: 1.5; --ks-body-s-weight: 400; --ks-label-size: 12px; --ks-label-lh: 1.4; --ks-label-weight: 600; --ks-label-tracking: 0.06em; /* --- Spacing scale (px) ------------------------------------------------ */ --ks-space-1: 4px; --ks-space-2: 8px; --ks-space-3: 12px; --ks-space-4: 16px; --ks-space-5: 20px; --ks-space-6: 24px; --ks-space-8: 32px; --ks-space-10: 40px; --ks-space-12: 48px; --ks-space-16: 64px; /* --- Radius ------------------------------------------------------------ */ --ks-radius-xs: 4px; --ks-radius-sm: 6px; --ks-radius-md: 10px; --ks-radius-lg: 16px; --ks-radius-xl: 24px; --ks-radius-pill: 999px; /* --- Elevation --------------------------------------------------------- */ --ks-shadow-xs: 0 1px 1px rgba(12,59,93,0.04); --ks-shadow-sm: 0 1px 2px rgba(12,59,93,0.06), 0 1px 2px rgba(12,59,93,0.04); --ks-shadow-md: 0 4px 12px rgba(12,59,93,0.08), 0 2px 4px rgba(12,59,93,0.05); --ks-shadow-lg: 0 16px 40px rgba(12,59,93,0.10), 0 4px 12px rgba(12,59,93,0.06); --ks-shadow-xl: 0 32px 80px rgba(12,59,93,0.14), 0 8px 24px rgba(12,59,93,0.08); /* --- Card surface (component tokens) ----------------------------------- */ /* The "content sits on white paper, the page is the desk" rule for utility pages: tables and panels get a card, the page keeps the cool canvas. Change these four values and EVERY card in the app follows — that is the whole point of having them as component tokens rather than repeating the recipe per page. */ /* The two colour knobs are literal hexes, not var() aliases: the Customizer's colour pickers read the COMPUTED value, and an alias can hand back "var(--ks-canvas)" instead of a colour. They intentionally match --ks-canvas / --ks-line. */ --ks-card-bg: #FFFFFF; /* = --ks-canvas */ --ks-card-border: #E5E8EC; /* = --ks-line */ --ks-card-radius: var(--ks-radius-md); --ks-card-shadow: var(--ks-shadow-xs); --ks-card-pad: 14px 16px; } /* ============================================================================ Component classes ---------------------------------------------------------------------------- Utility classes built from the tokens above. Use `.ks-card` for any new panel or table surface instead of re-declaring background/border/radius/shadow. Page-scoped styles that cannot add a class (existing markup) should still pull the --ks-card-* tokens rather than hard-coding the values. ============================================================================ */ .ks-card { background: var(--ks-card-bg); border: 1px solid var(--ks-card-border); border-radius: var(--ks-card-radius); box-shadow: var(--ks-card-shadow); padding: var(--ks-card-pad); } /* Card whose child fills it edge to edge — a full-bleed table, or a scroll container where padding would scroll away with the content. */ .ks-card-flush { padding: 0; overflow: hidden; } /* "Add a column / add a source" affordance — the dashed outline reads as an empty slot waiting to be filled, which a solid button does not. Used by the Tax Scenarios worksheet and the Withholding tracker; add the class, then set only width/padding page-side. Do NOT re-declare the dashed look per page. */ .ks-addcol { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; box-sizing: border-box; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ks-blue); background: var(--ks-canvas); border: 1px dashed var(--ks-blue-soft); border-radius: var(--ks-radius-md); cursor: pointer; } .ks-addcol:hover:not(:disabled) { background: var(--ks-sky-50); } /* Disabled goes solid: a dashed "empty slot" you cannot fill is a misread. */ .ks-addcol:disabled { opacity: 0.4; cursor: not-allowed; border-style: solid; } /* --------------------------------------------------------------------------- Collapsible review banner — the "N parameters need review" strip that sits above a data surface, click-to-expand into the list of warnings. Promoted here on 2026-07-29 (Chad). It previously existed as two copies, .taxws-review in TaxScenarioWorksheet.razor and .taxwh-review in TaxWithholdingTracker.razor, which silently drifted apart on EVERY axis — fill, border, radius, padding, and the whole type scale — until the two tabs showed visibly different banners. One definition, so that cannot recur. Usage: put .ks-review on the wrapper and .ks-review-top / -icon / -toggle / -x on the parts; the warning list is a plain