/* Marsa ยท the shared stylesheet * * The tokens and the base rules, lifted out of app.html on 29 August 2026 (Stage 1 of the * One World build) so that the desk and the world are one product rather than two that * happen to look alike. Both pages link this file and neither carries a copy. * * A theme change is a token flip: change a value here and it lands on every screen. Nothing * in a component may carry a literal hex. * * The world sets data-theme="dark" on , so it takes the dark block below. The desk * ships light and switches at the same attribute. */ /* ============================================================ TOKENS ============================================================ */ :root{ --paper:#F5F4EF; --surface:#FFFFFF; --surface-2:#FBFAF6; --surface-3:#F1EFE8; --line:#E8E5DC; --line-2:#DCD8CD; --line-3:#CBC6B8; --ink:#141A22; --ink-2:#525D6B; --ink-3:#88919E; --ink-4:#A9B0BA; --navy:#0B1520; --navy-2:#122132; --navy-3:#18293C; --navy-line:#1D2E41; --navy-ink:#93A6BA; --navy-ink-2:#6C8098; --hi:#F2F6FA; --teal:#0E6F66; --teal-2:#0B5A53; --teal-br:#2E9E90; --teal-bg:#E6F1EF; --teal-line:#BEDCD7; --brass:#A98544; --brass-br:#C79A44; --brass-bg:#F7F0DF; --brass-line:#E7D6AF; /* Amber was #A9711A, 3.8:1 on paper (lane 4's measurement, 1 September 2026). This value is 5.0:1 and keeps the hue, so a status word in amber passes AA at every size the three surfaces use it at. The dark palette's amber already passes. */ --warn:#8F5E14; --warn-bg:#FBF0DC; --warn-line:#EDD6A8; --bad:#A6352C; --bad-bg:#FAE9E6; --bad-line:#F0CAC3; --info:#3A5A78; --info-bg:#E9F0F6; --info-line:#C9DAE8; --serif:'Instrument Serif', Georgia, serif; --arabic:'Amiri','Geeza Pro',serif; --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; --ease:cubic-bezier(0.23,1,0.32,1); --sh1:0 1px 2px rgba(20,26,34,.05); --sh2:0 1px 2px rgba(20,26,34,.05),0 10px 26px rgba(11,21,32,.07); --sh3:0 24px 64px rgba(11,21,32,.20),0 2px 8px rgba(11,21,32,.10); --rail:256px; --rail-icon:52px; --top:60px; /* The scales. The spacing steps the world's panels are set on and the type sizes that step with them, so a screen built from these reads as one hand. Charter Control carries the same idea in its own :root (--s1 to --s7); the world's steps are denser because its unit is a row in a 420 px panel rather than a control panel. Measured off world.html on 1 September 2026: these are the values that already dominated it, named. */ --s1:2px; --s2:4px; --s3:6px; --s4:8px; --s5:10px; --s6:14px; --s7:20px; --t0:9.5px; --t1:10px; --t2:10.5px; --t3:11px; --t4:11.5px; --t5:12.5px; --t6:13px; --t7:15.5px; --t8:23px; /* One duration for everything that moves, and the slow one for the panel and the strips that slide with it. Nothing bounces, nothing spins. */ --dur:160ms; --dur-slow:320ms; --radius-control:8px; --radius-panel:12px; --reading:16px; --reading-small:14px; --reading-title:28px; /* The globe's own palette. Five ship families and one for a hull whose type nobody broadcast, plus the two rings and the two boundary states. The globe reads these off :root at boot exactly as a component does, so a theme change lands on the water too and no drawing file carries a literal hex. */ --ship-tanker:#B57A18; --ship-cargo:#2E6E9E; --ship-passenger:#8E4EA8; --ship-fishing:#2E8455; --ship-service:#8A7C22; --ship-other:#5E7285; --ship-ring-sanctioned:var(--bad); --ship-ring-fleet:var(--brass-br); /* The centre pip: what this desk decided about her. Three words, three tones, and they are the desk's own ok/warn/bad so a decision reads the same on the water as on a row. */ --ship-decided-cleared:var(--teal-br); --ship-decided-questioned:var(--warn); --ship-decided-turned:var(--bad); --zone-live:#2E8455; --zone-pending:#B57A18; --coverage:var(--ink-3); color-scheme:light; } :root[data-theme="dark"]{ --paper:#0B1520; --surface:#101E2C; --surface-2:#0E1B28; --surface-3:#16283A; --line:#1D2E41; --line-2:#24384E; --line-3:#2E455E; --ink:#EAF1F7; --ink-2:#9FB2C4; --ink-3:#75899D; --ink-4:#5A6D80; --navy:#060E16; --navy-2:#0D1926; --navy-3:#142334; --navy-line:#1D2E41; --teal:#2E9E90; --teal-2:#39B3A3; --teal-br:#4FC2B2; --teal-bg:#0E2B29; --teal-line:#1B463F; --brass:#C79A44; --brass-br:#DBB264; --brass-bg:#2A2214; --brass-line:#463A1F; --warn:#DFA84B; --warn-bg:#2B2214; --warn-line:#4A3A1C; --bad:#E08076; --bad-bg:#2D1614; --bad-line:#4E2622; --info:#8FB3D0; --info-bg:#12222F; --info-line:#20384C; --sh1:0 1px 2px rgba(0,0,0,.30); --sh2:0 1px 2px rgba(0,0,0,.30),0 10px 26px rgba(0,0,0,.30); --sh3:0 24px 64px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35); /* On the water the same six families, lifted to read against navy. */ --ship-tanker:#E0A34A; --ship-cargo:#5FA8D3; --ship-passenger:#C98BD9; --ship-fishing:#6FBF8B; --ship-service:#D9CF7A; --ship-other:#7C93A8; --zone-live:#5FD08A; --zone-pending:#F2C14E; color-scheme:dark; } /* The world's controls need a readable floor without changing the desk's existing scale. */ :root[data-marsa-surface="world"]{ --t0:12px; --t1:12.5px; --t2:13px; --t3:13.5px; --t4:14px; --t5:15px; --t6:16px; --t7:18px; --t8:28px; } /* A reader who has asked the operating system for more contrast gets darker secondary ink and firmer rules. Lifted from app.html on 1 September 2026 (lane 3's note) so the desk, the world and Charter Control get the same behaviour from one place. */ @media (prefers-contrast:more){ :root{--ink-2:#3B4552;--ink-3:#5C6773;--line:#C4CAD2;--line-2:#AAB2BC} :root[data-theme="dark"]{--ink-2:#C4D3E0;--ink-3:#A3B4C4;--line:#33485E;--line-2:#3F566E} } /* ============================================================ RESET + BASE ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%} /* the base size is read by somebody sixty, on a tablet, in a port office */ body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:var(--t7);line-height:1.55;overflow-x:hidden} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} img,svg{display:block;max-width:100%} [hidden]{display:none !important} ::selection{background:var(--teal-line);color:var(--ink)} :focus-visible{outline:2px solid var(--teal-br);outline-offset:2px;border-radius:5px} h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.15} em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .ey{font-family:var(--mono);font-size:var(--t2);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .muted{color:var(--ink-2)} .dim{color:var(--ink-3)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* scrollbars */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:20px;border:3px solid var(--paper)} *::-webkit-scrollbar-thumb:hover{background:var(--line-3)}