@import "tailwindcss"; /* Dark mode is opt-in via a `dark` class on , set by the theme Stimulus controller. */ @variant dark (&:where(.dark, .dark *)); /* Brand typography. Plus Jakarta Sans is loaded via in the layouts. */ @theme { --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Eventya brand palette — see MIV_Eventya.pdf, chapter 4. */ --color-brand-50: #eaf0ef; --color-brand-100: #cdd9d7; --color-brand-500: #264D4A; --color-brand-600: #1f3f3d; --color-brand-700: #183030; --color-brand-yellow: #D6BD09; --color-brand-coral: #F95741; --color-brand-teal: #17C6A5; } /* Trix toolbar dark-mode override (ported from Stejar / Eventya). Replaces Trix's default black SVG button icons with mask-image so they inherit the surrounding `currentColor` and stay visible in both light and dark mode. */ @import "./trix.css"; /* Background fill for the verb labels drawn by the turtle-connectors Stimulus controller. The labels sit on top of the SVG flow lines so they need an opaque background to remain readable. */ .turtle-label-bg { fill: #ffffff; } :where(.dark) .turtle-label-bg { fill: #0f172a; /* slate-900 */ } /* Arrow-shaped Turtle facet card. Used on Inputs (left column, middle row) and Outputs (right column, middle row) so the cards visually read as right-pointing arrows. The right-padding leaves room for the clipped triangular tip so the inner content doesn't collide with the slope. Hidden below md because the grid is single-column on mobile and the arrow shape would look odd stacked vertically. */ @media (min-width: 768px) { .turtle-arrow-card { clip-path: polygon( 0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100% ); padding-right: 36px; } }