/* =========================================================================== Agent Awareness by RateHighway — the product visual standard. THIS FILE IS THE ONLY PLACE A COLOR IS DEFINED. Every stylesheet under app/public/ consumes these custom properties and carries no literal of its own. tests/theme-tokens.test.js enforces that. Authority. Michael Meyer, 2026-10-08: the product adopts the warm parchment standard recorded in /CURSOR-DESIGN.md and no longer inherits the RateMonitor Elite visual system. This supersedes the 2026-10-04 decision that the product be styled with RateHighway design system v7.0 and the 2026-10-06 rule that /ratehighway-theme.css be the sole color source. Agent Awareness remains a member of the RME family. Family membership is a commercial relationship and is no longer a visual inheritance. See AGENTS.md and AP-UI-STYLE.md. Authored here, copied to app/public/agent-awareness-theme.css by node build.js, and linked by every shell before its own stylesheet. Light theme only, deliberately. CURSOR-DESIGN.md is a light-theme reference and no dark counterpart has been approved, so no dark palette is invented here. The product previously inverted under prefers-color-scheme. It no longer does, and that is a decision rather than an omission. ------------------------------------------------------------------------- ACCESSIBILITY, AND WHERE THIS FILE DEPARTS FROM THE REFERENCE ON PURPOSE. Four of the reference's tones do not carry body text at WCAG AA. Measured against Parchment on 2026-10-08: Ash #7a7974 4.06:1 Driftwood #84847e 3.50:1 Mist #a1a19f 2.41:1 Ember #f54e00 3.28:1 The hand-off requires the accessibility floor to survive the palette change, so each has an accessible companion below and the rule is stated at the token: the reference tone is for non-text and decorative use, where the 3:1 graphical floor applies, and the companion carries text. Nothing here loosens a contrast requirement in order to look more like the reference. =========================================================================== */ :root { /* ---- Primitives. CURSOR-DESIGN.md, Tokens — Colors. ------------------- */ --color-parchment: #f7f7f4; /* canvas */ --color-bone: #f2f1ed; /* default grouped surface */ --color-linen: #e6e5e0; /* quiet secondary control, raised paper */ --color-stone: #cdcdc9; /* hairline, 1.49:1, borders only */ --color-mist: #a1a19f; /* non-text tertiary marks only */ --color-driftwood: #84847e; /* non-text secondary marks only */ --color-ash: #7a7974; /* icon fills and decorative rules only */ --color-ink: #26251e; /* primary text and primary action fill */ --color-ember: #f54e00; /* accent. Non-text: underlines, edges, dots */ --color-amber: #c08532; --color-forest: #34785c; --color-verdant: #1f8a65; --color-crimson: #cf2d56; /* Accessible companions. The same hues, darkened until body text passes AA on Parchment, Bone and Linen alike. These are the text-bearing tokens. */ --color-ash-deep: #686760; /* 5.29 / 5.02 / 4.50 — muted and secondary text */ --color-ember-text: #c23d00; /* 4.94 / 4.69 — links and text emphasis */ --color-amber-text: #8a5e1f; /* 5.29 / 5.02 */ --color-verdant-text: #186a4e; /* 6.09 / 5.79 */ /* The one cool tone in the system, reserved for browser text selection so it never competes with the warm palette. CURSOR-DESIGN.md, Selection Highlight. */ --color-selection: #8BC4F8; /* Ink and Ember as channels, for the hairlines and tints that need an alpha. Mixing toward transparent keeps a tint warm where a gray would go cold. */ --color-ink-rgb: 38, 37, 30; --color-ember-rgb: 245, 78, 0; /* ---- Surfaces. CURSOR-DESIGN.md, Surfaces. ---------------------------- */ --aa-canvas: var(--color-parchment); --aa-surface: var(--color-bone); --aa-surface-raised: var(--color-linen); --aa-surface-inverse: var(--color-ink); /* ---- Lines. Hairlines, not shadows, carry the structure. -------------- */ --aa-line: rgba(38, 37, 30, .10); /* ordinary divider */ --aa-line-strong: var(--color-stone); /* control boundary */ --aa-line-faint: rgba(38, 37, 30, .06); /* ---- Text. ------------------------------------------------------------ */ --aa-text: var(--color-ink); --aa-text-secondary: var(--color-ash-deep); --aa-text-muted: var(--color-ash-deep); --aa-text-inverse: var(--color-parchment); --aa-text-on-dark: var(--color-linen); /* 12.19:1 on Ink */ --aa-icon: var(--color-ash); /* non-text, 4.06:1 */ /* ---- Accent. Ember punctuates. It is never a surface or a button fill. - */ --aa-accent: var(--color-ember); /* rules, edges, dots, markers */ --aa-accent-text: var(--color-ember-text); /* links and emphasized words */ --aa-link: var(--color-ember-text); /* ---- Actions. One dominant Ink primary per view, paired with one Linen secondary or a ghost. Never three filled. ------------------------- */ --aa-btn-primary-bg: var(--color-ink); --aa-btn-primary-text: var(--color-parchment); --aa-btn-primary-bg-hover: #3a382e; /* Ink lifted one step, 11.0:1 with Parchment */ --aa-btn-secondary-bg: var(--color-parchment); --aa-btn-secondary-text: var(--color-ink); --aa-btn-secondary-border: var(--color-stone); --aa-btn-secondary-bg-hover: var(--color-linen); /* The focus ring. Ink rather than a chromatic ring, so one ring reads on Parchment, Bone, Linen and inside an Ink button alike. 14.33:1 on canvas. */ --aa-focus: var(--color-ink); /* The scrim behind a dialog. Warm ink, not a cool gray. */ --aa-overlay: rgba(38, 37, 30, .45); /* A hovered or selected row. A tint of the ink, never a color wash. */ --aa-hover-tint: rgba(38, 37, 30, .05); --aa-selected-tint: rgba(245, 78, 0, .07); /* ---- Status and emphasis. Color is supplementary everywhere: a word and a marker carry the meaning (NFR-ACC-02). These never mean confidence or measurement, which stay in text. ---------------------------------- */ --aa-positive: var(--color-forest); --aa-positive-text: var(--color-forest); --aa-caution: var(--color-amber); --aa-caution-text: var(--color-amber-text); --aa-critical: var(--color-crimson); --aa-critical-text: var(--color-crimson); --aa-notice: var(--color-verdant); --aa-notice-text: var(--color-verdant-text); --aa-caution-tint: rgba(192, 133, 50, .12); --aa-notice-tint: rgba(38, 37, 30, .05); /* ---- Brand monogram tones. Six steps of the warm ink ramp, assigned deterministically per brand so a brand keeps its mark across sessions and accounts. These are our own palette and imply no real logo: a customer's uploaded mark is governed by FR-BR and is a different thing. Every step carries Parchment text at 4.5:1 or better. --------------- */ --aa-tone-1: #6f6e66; /* 4.63:1 with Parchment text */ --aa-tone-2: #5f5e56; --aa-tone-3: #4f4e46; --aa-tone-4: #413f38; --aa-tone-5: #34332c; --aa-tone-6: var(--color-ink); /* ---- Data series. Resolved in app/web/theme.js and passed to Highcharts as concrete colors, never as a var(). Kept here so the palette still has one definition. --------------------------------------------------- */ --aa-series-1: #2f5d8a; --aa-series-2: #8a5e1f; --aa-series-3: #cf2d56; --aa-series-own: #c23d00; --aa-seq-1: #e8e7e1; --aa-seq-2: #cfd6dd; --aa-seq-3: #a6b7c9; --aa-seq-4: #7392b1; --aa-seq-5: #456d94; /* ---- Third-party sign-in buttons. NOT OURS, AND NOT THE PALETTE. Google publishes an exact specification for the "Sign in with Google" button: #FFFFFF ground, #747775 border, #1f1f1f label, Roboto Medium at 14px, a 40px control and an 18px mark. Their guidelines do not permit restyling it, so this is the one control in the product that does not take the product palette. Two of our own rules are broken here on purpose. The standard forbids pure white, and this button is pure white because Google says so. And the label is Roboto rather than the UI stack, for the same reason. Recorded rather than quietly tolerated: see AGENTS.md. The marks themselves are separate SVG assets under app/public/img/, so a trademark's colors never enter a stylesheet. Microsoft, Facebook and Apple each publish their own mandatory button specification too, and none of the three is implemented yet. Their controls currently use the product's own secondary button, which is a known gap rather than an approved treatment. ------------------------- */ --google-btn-bg: #FFFFFF; --google-btn-bg-hover: #F7F8F8; --google-btn-border: #747775; --google-btn-text: #1f1f1f; --font-google-btn: Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* ---- Typography. CURSOR-DESIGN.md, Tokens — Typography. CursorGothic and Berkeley Mono are NOT licensed to RateHighway and are not bundled, downloaded or served. The stacks below name them first so that a licensed local installation is honored where one exists, and otherwise resolve to the documented substitutes. No runtime font CDN is added. EB Garamond is used on the same terms; the serif stack falls back to the Iowan / Palatino / Georgia line the reference specifies. ---------------- */ --font-ui: 'CursorGothic', Inter, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, ui-serif, Georgia, serif; --font-mono: 'berkeleyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* Headlines whisper at 400 and tighten as they grow. That IS the signature, so weight 600 and 700 are not used on a heading anywhere in this product. */ --aa-weight-regular: 400; --aa-weight-medium: 500; /* The type scale. The sizes are the reference's; the body floor is ours, because visual resemblance never justifies 11px essential text. */ --text-eyebrow: 12px; --leading-eyebrow: 1.63; --tracking-eyebrow: .08em; --text-meta: 13px; --leading-meta: 1.5; --text-body: 15px; --leading-body: 1.55; --text-body-lg: 16px; --leading-body-lg: 1.5; --text-heading-xs: 17px; --leading-heading-xs: 1.35; --tracking-heading-xs: -.004em; --text-heading-sm: 22px; --leading-heading-sm: 1.3; --tracking-heading-sm: -.005em; --text-heading: 26px; --leading-heading: 1.25; --tracking-heading: -.012em; --text-heading-lg: 36px; --leading-heading-lg: 1.2; --tracking-heading-lg: -.02em; --text-display: 56px; --leading-display: 1.1; --tracking-display: -.03em; /* ---- Spacing. Base unit 4px, compact density. ------------------------- */ --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; /* ---- Geometry. 4px throughout, 8px reserved for modals. No pill on a button, card, input or tile. -------------------------------------- */ --radius: 4px; --radius-modal: 8px; --radius-pill: 999px; /* status chips and dots only, never a control */ /* ---- Elevation. Ordinary work areas stay flat. Only something that truly floats takes a shadow, and the shadow stays warm. ------------------ */ --shadow-flyout: 0 10px 28px rgba(38, 37, 30, .12), 0 2px 6px rgba(38, 37, 30, .06); --shadow-modal: 0 28px 70px rgba(38, 37, 30, .18), 0 14px 32px rgba(38, 37, 30, .10); /* ---- Layout. ---------------------------------------------------------- */ --page-max-width: 1300px; --card-padding: var(--spacing-24); } /* The only cool tone in the system, and the only place it appears. */ ::selection { background: var(--color-selection); color: var(--color-ink); }