/* ========================================================================== Shared design language for every app in the portal. -------------------------------------------------------------------------- Apps live in separate repos and run in separate frames, so their LAYOUT is isolated by design -- one app's CSS can never reach another's. This file is the deliberate exception: the vocabulary they all speak, so isolation doesn't turn into drift. IT IS COPIED, NOT LINKED. Each app keeps its own copy so it stays independently deployable and can be removed without breaking anything else. The cost is that a palette change means updating each app; that is the price of the apps not being able to break each other, and it is the right trade for a file that changes a few times a year. Nothing here should describe layout; only the raw materials. ========================================================================== */ :root { /* Surfaces */ --bg: #fbfbfd; /* the page behind everything */ --panel: #ffffff; /* raised cards sitting on it */ --chip: #f1f3f7; /* recessed fills: pills, bars, inputs */ --border: #e3e5ea; /* hairlines; never a colour, always neutral */ /* Text */ --text: #1a1c22; --muted: #6b7280; /* Meaning. Reserved for interactive state and data -- never for framing a container. If the accent is also drawing boxes, it stops meaning "this is live" or "look here". */ --accent: #3b6ef5; --pos: #0f8a4d; --neg: #c8352b; /* Form */ --radius: 11px; --radius-sm: 7px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(16, 20, 30, .06), 0 4px 16px rgba(16, 20, 30, .05); --font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #0f1116; --panel: #171a21; --chip: #1f242e; --border: #262b35; --text: #e7e9ee; --muted: #9aa1ad; --accent: #6b9bff; --pos: #3fbd7c; --neg: #f0685c; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 18px rgba(0, 0, 0, .28); } } /* An explicit choice beats the OS preference, in both directions. The shell's theme control sets data-theme on and forwards it into every frame, so one toggle moves the whole portal. */ :root[data-theme="light"] { --bg: #fbfbfd; --panel: #ffffff; --chip: #f1f3f7; --border: #e3e5ea; --text: #1a1c22; --muted: #6b7280; --accent: #3b6ef5; --pos: #0f8a4d; --neg: #c8352b; --shadow: 0 1px 2px rgba(16, 20, 30, .06), 0 4px 16px rgba(16, 20, 30, .05); } :root[data-theme="dark"] { --bg: #0f1116; --panel: #171a21; --chip: #1f242e; --border: #262b35; --text: #e7e9ee; --muted: #9aa1ad; --accent: #6b9bff; --pos: #3fbd7c; --neg: #f0685c; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 18px rgba(0, 0, 0, .28); } * { box-sizing: border-box; }